Shulou(Shulou.com)06/02 Report--

This article focuses on "what is the template binding for Knockout application development". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what is the template binding for Knockout application development"?

Purpose

The template binding render the data to the page through a template. Template binding is very convenient for building pages with nested structures. By default, Knockout uses the popular jquery.tmpl template engine. To use it, you need to download and reference the jquery.tmpl and jQuery frameworks on the installation page. Or you can integrate other template engines (although you need to know the internal knowledge of Knockout).

Examples

${name} is ${age} years old Make older var viewModel = {name: ko.observable ('Bert'), age: ko.observable (78), makeOlder: function () {this.age (this.age () + 1);}}; ko.applyBindings (viewModel)

When the referenced observable (dependent observable) data changes, Knockout automatically re-render the template. In this example, the render template is re-created each time you click on button.

Grammar

You can use any syntax that your template engine supports. Jquery.tmpl executes the following syntax:

◆ ${someValue}-reference documentation

◆ {{html someValue}}-reference documentation

◆ {{if someCondition}}-reference documentation

◆ {{else someCondition}}-reference documentation

◆ {{each someArray}}-reference documentation

Use {{each}} with the observable array

Of course, when using {{each someArray}}, if your value is observableArray, you must use the underlying array type of JavaScript type {{each myObservableArray ()}} instead of {{each myObservableArray}}.

Parameters.

Main parameter

Quick grammar memorization: if you declare only a string (in the previous example), KO will use the template's ID to render. The data applied to the template is your entire view model object (such as an ko.applyBindings bound object).

For more controls, you can pass JavaScript objects with the following properties:

Name (required)-template ID for render is required-refer to note 5 how to declare ID using the function function.

Data (optional)-data from render to template is required. If you ignore the entire parameter, KO will look for the foreach parameter, or apply the entire view model object.

Foreach (optional)-specifies that the KO follows the "foreach" mode render template-reference Note 3.

AfterAdd or beforeRemove (optional)-use the callback function in foreach mode.

TemplateOptions (optional)-pass extra data for use when using render templates. Reference Note 6.

An example of passing multiple parameters:

Note 1:Render nested template

Because the data-bind attribute is used to declare in the template, you can use data-bind='template:... again in the element of the upper template.

This is much easier to use than the native syntax caused by templates (such as {{tmpl}} in jquery.tmpl). The advantage of Knockout syntax is that it can follow the relevant dependency values in each layer of the template, so if the dependency changes, KO will only re-render the template in which it is located. This will greatly improve performance.

Note 2What's the difference between VAT ${val} and?

When you use the data-bind attribute inside the template, KO tracks dependencies separately for this binding. When the model changes, KO updates only the bound elements and child elements without the need to re-render the entire template. So if you declare that such code is, when someObservableValue changes, KO will simply update the text value of the element without having to re-render the entire template.

However, if the KO value used inside the template (for example, ${someObservableValue}) is changed, then KO will re-render the entire template.

That is to say, in many cases the performance is better than ${someObservableValue}, because the change in value does not affect the state of the neighboring elements. However, the syntax of ${someObservableValue} is relatively concise, and if your template is small, it is more appropriate and will not cause major performance problems.

Note 3: use foreach

If you need to template once for each item render in the collection, there are two ways:

You can use the native "each" syntax in the template engine, which in the case of jquery.tmpl is to iterate over the array with the {{each}} syntax.

Another way is to use Knockout's foreach mode to render.

Example:

The benefits of the foreach template model are:

◆ when you add a new item item to your collection collection, KO will only render the new item and attach the results to the existing DOM.

◆ when you delete item from the collection collection, KO will not re-render any templates, but will simply delete the related elements.

◆ KO allows you to add / remove DOM elements by declaring the callback function of afterAdd and beforeRemove in a custom way. Then the callback will do some animation or other operations when deleting the element.

Unlike native each, the template engine forces all the content in the template to be re-render after the change, because it doesn't pay attention to the so-called dependency tracking content in KO.

For examples of using the foreach pattern, refer to grid editor and animated transitions.

Note 4: use the afterRender option

Sometimes you need to define logic deeply on the DOM elements generated by the template. For example, you might want to intercept when the template is output, and then allow jQuery UI commands (such as date picker,slider, or others) on the elements of render.

You can simply declare a function function (an anonymous function or a function in view model) using the afterRender option, and Knockout will call it again after render or re-render the template. If you are using foreach, Knockout will call afterRender's callback function immediately after each item is added to the observable array. For example,

... Declare a similar function in view model (for example, the object contains myData):

ViewModel.myPostProcessingLogic = function (elements) {/ / "elements" is an array of DOM nodes just rendered by the template / / You can add custom post-processing logic here}

Note 5: dynamically decide which template to use

Sometimes, you may need to decide which template's ID to use based on the state of the data. You can apply it to the name selection through the return ID of function. If you are using foreach template mode, Knockout will function each item (taking item as a parameter) to return the value as ID, otherwise, the function accepts the entire data option or the entire view model.

Example:

Var viewModel = {employees: ko.observableArray ([{name: "Kari", active: ko.observable (true)}, {name: "Brynn", active: ko.observable (false)}, {name: "Nora", active: ko.observable (false)}]), displayMode: function (employee) {return employee.active ()? "active": "inactive" / Initially "Kari" uses the "active" template, while the others use "inactive"}}; / /. Then later... ViewModel.employees () [1] .active (true); / / Now "Brynn" is also rendered using the "active" template.

If your function refers to the bind value, then when these values change, the bound value will change. This will cause the corresponding template to be re-render.

Note 6: use templateOptions to pass additional parameters

If you need to pass in additional data when binding the template, you can use the templateOptions object to pass these values. This can help you reuse templates through filter criteria or characters that are not part of view model. Another benefit is that it is used in scope control, where you can reference the data accessed through your template.

Exampl

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.