The use of the observable and the applybindings of Knockoutjs

Observable in Knockoutjs is a core function, in the monitoring data changes, it is necessary to use the KNOCKOUTJS monitoring properties-- observable .

ko.observable()The simple use

Let's start with an example:

var a = ko.observable(‘hello Knockoutjs!‘);console.log(a()); // hello Knockoutjs!a(‘This is Knockoutjs!‘);console.log(a()); // This is Knockoutjs!

As you can see from the above example, you ko.observable() will set the value and return a function to the variable A, the variable a becomes the Monitoring property, and then you can a() change the value by getting the value a(‘foo‘) .

Create a view Model with monitoring properties

There are two ways of creating a view model:

• declares an object;
• Use the new keyword to instantiate the function.

Such as:

// 直接声明一个对象的方式var viewmodel = {    name: ko.observable(‘satrong‘),    job: ko.observable(‘web dever‘)};

// 使用new关键词实例化一个函数的方式var Viewmodel = function(){ this.name = ko.observable(‘satrong‘); this.job = ko.observable(‘web dever‘);};var viewmodel = new Viewmodel();

After creating the view model, create a simple HTML view

<div data-bind="text:name"></div><div data-bind="text:job"></div><div><input type="value:job" /></div>

In the view we need to use the data-bind ViewModel and HTML that we just created together, but because the browser does not recognize data-bind the role, so we must also use ko.applyBindings(viewmodel); to activate the knockout, this step is necessary.

ko.applyBindingsIntroduction to Parameters

ko.applyBindingsTwo parameters are acceptable:

• The first parameter is a required parameter, which is the view Model we created earlier;
• The second parameter is optional and refers to the scope of the knockout control HTML. If NULL is the default document, if you need to specify that it can be set by document.getElementById (' Element ID ').

ko.applyBindingsproblems you may encounter when using:

• Tip "You cannot apply bindings multiple times to the same element.", meaning that you cannot repeat the binding on the same element, so set the range of the second parameter.
• Some events have been added to the element, but ko.applyBindings events added after the use have not worked. The personal understanding is that, when used ko.applyBindings , KO will erase events from all elements within the specified range (or other reasons to clear the event), so we can add events later in order to preserve the events we have added ko.applyBindings .

The chain style in knockout

As we defined earlier in the ViewModel:

var viewmodel = {    name: ko.observable(‘satrong‘),    job: ko.observable(‘web dever‘)};

If we want to name modify job the values, we may write:

viewmodel.name(‘chc‘);viewmodel.job(‘secret‘);

For the sake of convenience and simplification, like the way jquery is written $(‘#test‘).find(‘a‘).eq(0) , Ko of course is also indispensable, so the above wording we can simplify:

viewmodel.name(‘chc‘).job(‘secret‘);

The first time to use Markdown to write articles, because of their grammar is not very skilled, writing it is a little difficult, but fortunately, there is no use of a lot of grammar.

The use of the observable and the applybindings of Knockoutjs