Menu
I need attribute like data-id, data-action
<div class="dd" id="nestable3">
<ol class="dd-list">
<li class="dd-item dd3-item" data-id="13">
<div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 13</div>
</li>
<li class="dd-item dd3-item" data-id="14">
<div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 14</div>
</li>
<li class="dd-item dd3-item" data-id="15">
<div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 15</div>
<ol class="dd-list">
<li class="dd-item dd3-item" data-id="16">
<div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 16</div>
</li>
<li class="dd-item dd3-item" data-id="17">
<div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 17</div>
</li>
<li class="dd-item dd3-item" data-id="18">
<div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 18</div>
</li>
</ol>
</li>
</ol>
</div>
I need to create the attribute data-id="13". How do I create it with knockout js attr binding...
320
Knockout's declarative binding system provides a concise and powerful way to link data to the UI. It's generally easy and obvious to bind to simple data properties or to use a single binding.
The $data variable is a built-in variable used to refer to the current object being bound. In the example this is the one of the elements in the viewModel.
The SPA template is designed to get you started quickly writing modern, interactive web applications. It uses the Knockout. js library to separate presentation (HTML markup) from the data and application logic. But Knockout is not the only JavaScript library you can use to create a SPA.
An observable is useful in various scenarios where we are displaying or editing multiple values and require repeated sections of the UI to appear and disappear as items are inserted and deleted. The main advantage of KO is that it updates our UI automatically when the view model changes.
This is a custom Knockout attribute (all custom HTML5 attributes have the data- prefix) that defines what attributes on the HTML element should bind to what properties on your binding context (we’ll see that in a minute). The binding then makes sure that any changes in your form are reflected in your data and vice versa.
KnockoutJS - Attr Binding. This binding allows you to dynamically assign HTML elements attribute using ViewModel property. For example, you can set src attribute for an image, title attribute for HTML page, or a href for a link in the tag based on values in ViewModel.
The data-bind syntax. Knockout’s declarative binding system provides a concise and powerful way to link data to the UI. It’s generally easy and obvious to bind to simple data properties or to use a single binding. For more complex bindings, it helps to better understand the behavior and syntax of Knockout’s binding system.
First you’ll need to get Knockout and jQuery. Head over to the Knockout download page (version 3.3.0) and the jQuery download page (version 2.1.3) to get them. Of course if you got the source from my GitHub you’re already good to go. So here’s the HTML.
Use the attr binding data-bind="attr: {'data-id': id}"
62
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
