logo
down
shadow

Knockout JS using computed arrays outside of ViewModel


Knockout JS using computed arrays outside of ViewModel

By : Steven Cahill
Date : November 22 2020, 02:42 PM
I think the issue was by ths following , You were working on this before, and I didn't have a working solution for you. Today, I do. Your use of a jQuery trigger is not going to work out well. Let's do it all with Knockout.
I made items to be just an array of objects that do not have assigned positions. orderedItems is a computed that goes through items in order and creates an observable for position.
code :
$(function() {
  ko.applyBindings(viewModel());
});

function item(name) {
  return {
    name: name
  };
}

var viewModel = function() {
  var self = {};
  self.items = ko.observableArray([
    item('item1'),
    item('item2'),
    item('item4'),
    item('item5'),
    item('item3')
  ]);

  function moveItemTo(item, pos) {
    var oldPos = self.items.indexOf(item),
      newPos = pos - 1,
      items;
    if (oldPos < newPos) {
      items = self.items.slice(oldPos, newPos + 1);
      items.push(items.shift());
      self.items.splice.bind(self.items, oldPos, items.length).apply(self.items, items);
    } else {
      items = self.items.slice(newPos, oldPos + 1);
      items.unshift(items.pop());
      self.items.splice.bind(self.items, newPos, items.length).apply(self.items, items);
    }


  }
  self.orderedItems = ko.computed(function() {
    return ko.utils.arrayMap(self.items(), function(item, index) {
      var pos = ko.observable(index + 1);
      pos.subscribe(moveItemTo.bind(null, item));
      return {
        name: item.name,
        position: pos
      };
    });
  });
  return self;
}; //end of viewmodel
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div>Set the order of the item by selecting a new position from the dropdown:
  <ul data-bind="foreach: orderedItems">
    <li>
      <div>	<span data-bind="text: name"></span>	
        <select data-bind="options: $root.orderedItems, optionsValue:'position', value: position"></select>
      </div>
    </li>
  </ul>
</div>ITEMS CONTENTS:
<BR>
<span data-bind="text: JSON.stringify(ko.toJS(items), null, 4)"></span>


Share : facebook icon twitter icon
Using a Computed Value that accesses a function in the parent viewmodel in Knockout

Using a Computed Value that accesses a function in the parent viewmodel in Knockout


By : Rick
Date : March 29 2020, 07:55 AM
With these it helps I think you wanted to be able to lookup the manufacturer list in the parent viewmodel from the child Part model. I changed a few things in your fiddle and created a new one that resolves this: http://jsfiddle.net/johnpapa/dsZ76/
First, the data-bind attributes were using value when they should have been using text. The

tags should also use a closing p tag. Also, you were binding to the manufacturer property, but that is the object being returned so it should have been manufacturer().name.

Knockout, ViewModel is object no computed possible?

Knockout, ViewModel is object no computed possible?


By : webgremlin
Date : March 29 2020, 07:55 AM
wish help you to fix your issue If you look on the docs for computed observables, you'll see that ko.computed takes an argument for the scope of this. Try changing your code so it works like in the examples and it should work
Knockout ViewModel computed garbage collection

Knockout ViewModel computed garbage collection


By : silve silve
Date : March 29 2020, 07:55 AM
With these it helps Chrome, like all modern browsers, uses a mark-and-sweep algorithm for garbage collection. From MDN:
Add mixin with ko.computed to knockout viewmodel

Add mixin with ko.computed to knockout viewmodel


By : user3046560
Date : March 29 2020, 07:55 AM
will help you asActor.call(SenderActor.prototype); does the following -
it calls asActor and passes SenderActor.protototype object as this this.nrOfEmployees = ko.computed(...) creates a ko.computed inside SenderActor.protototype it evaluates the computed in same context this still points to SenderActor.protototype
viewModel computed functions on the prototype using knockout.js

viewModel computed functions on the prototype using knockout.js


By : LucasZL
Date : March 29 2020, 07:55 AM
it fixes the issue ko.computed function include a second parameter that allows to bind the computed function this to whichever object you specify. (Behind the scenes it simply uses apply)
So, when you're defining your computed in the prototype, you simply have to bind the computed to this, like so:
code :
ViewModel.prototype.Messages = ko.computed(function(){
  // your function code
  }, this);
Related Posts Related Posts :
  • I want to restrict HTML input autocomplete to 3 letter minimum
  • tinyMCE editor not updating on the fly
  • typescript kendo-ui call method from string
  • HttpCompileException was unhandled by user code (when i am adding c# code in script)
  • Send form data as array of objects to controller in asp.net mvc
  • Javascript, multi file modules and Require.Js
  • how to render a complete new template and leave the application template in ember
  • Hover unrelated divs
  • Permute string until it matches some input?
  • How to fire JQuery change event when input value changed programmatically?
  • AJAX: POST data to a different url
  • checkbox column in jquery datatable
  • Document.evaluate for documents without namespaceURI crashes Microsoft Edge
  • Bootstrap Menu with "More" option Responsive issue
  • Standard inputs not being added to Angularjs Form $Scope
  • Express promise throw error
  • onclick and get in jquery
  • How to get the country code from Google Places API
  • Passing parameters url in Select2
  • Is there any frame work for Marklogic to write javascript code?
  • How to implement a boostrap template over bootstrap-sass gem
  • Why fixed div comes out when horizontally scrolled?
  • How to limit scope of a function in javascript/ jquery
  • Overlapping legend d3.js
  • Apply transition to div
  • Javascript game help - counting with dice
  • How to hide a div from angular controller
  • Can Promise load multi urls in order?
  • How enable Hover event for bootstrap menus?
  • D3 scale.invert() isn't returning date for x
  • Parsing object to array using underscore js or lodash
  • ES6 with React and Browserify
  • AngularJS Factory return type undefined
  • javascript follow html input fields
  • how to declare a double array in javascript for this particular UI
  • Jquery : find length of mixed list
  • Returning the array before the function is complete & Angular JS
  • Javascript set value of class & hidden input in nested divs
  • Register custom filters with vue.js
  • Add class to input parent
  • Angular controller not talking to view
  • Trouble creating "if then" Javascript statement to change background color of page
  • Socket.IO - Middleware and scoping: how should I access global IO object from external middleware?
  • add class when input is valid in angularjs
  • Positioning multiple div elements
  • Checkbox clicking works, deselecting checkbox not working Javascript
  • Adding ajax jQuery File upload
  • Creating a dynamic array within a dynamic array in JQuery
  • Multiple File Upload actions for a single File Input PHP/JS
  • Want to move an added element to a different part of the DOM
  • Why can't I get Angularjs to work?
  • Minimizing browser window in Firefox & Chrome adds white space to right of page
  • I need to insert the date and time of employee stamp in and out into mysql database
  • Making css auto slider
  • why can't I defne the function first?
  • Pagination with MongoDB in Node.js (With Sorting)
  • How to repeat each() without page refresh
  • Position div at position of another div
  • Click handler is called multiple times in jQuery animate
  • How to multiply each element in an array with a different number (javascript)
  • shadow
    Privacy Policy - Terms - Contact Us © animezone.co