knockout-templating | 易学教程

KnockoutJS: Make nested sortable automatically expand when adding a child

阅读更多关于 KnockoutJS: Make nested sortable automatically expand when adding a child

问题 In the attached example I have a nested sortable that is capable of displaying tree structures. The goal is to make the structure expand when new child is added to make the change visible. A function automatically expands the structure when a new item is being added, but it only expands after adding 2nd child , it should expand immediately after adding 1st child. Something is probably wrong with the template, or a simple jQuery+CSS trick could solve the problem, but I can't find the right one

knockout template binding

阅读更多关于 knockout template binding

问题 I have an ul element which is filled through template binding. <script type="text/html" id="someTemplate"> <li> <span data-bind="text: someText"> </li> </script> <ul data-bind="template: {foreach: someElemets, name: 'someTemplate'}"> </ul> But I want the first li-tag would not be li-tag from template but another one with button in it and it will not be connected to someElemets array. If I do in that way <ul data-bind="template: {foreach: someElemets, name: 'someTemplate'}"> <li><button data

KnockoutJS bind event after template render

阅读更多关于 KnockoutJS bind event after template render

问题 I've been searching for a while, and I'm pretty confident this is a new question, and not a repeat like the title suggests. :) Basically, I'm trying to find out if there is a subscribe-able event that KnockoutJS creates after a template render when using something like jQuery templates. I'd use the built-in "afterRender" but I found out that it doesn't fire if the observable array is cleared. I built this demo to illustrate that problem: http://jsfiddle.net/farina/YWfV8/1/. Also, I'm aware

Using an external Template in KnockoutJS

阅读更多关于 Using an external Template in KnockoutJS

问题 is it possible to use an external Template in KnockoutJS like this? <script type="text/html" id="a_template" src="templates/a_template.html"> </script> I've tried this solution but didn't get it working. 回答1: You could also look at: https://github.com/ifandelse/Knockout.js-External-Template-Engine 回答2: You can use jquery to dynamically load html into a script element, and then execute knockout based on that. <script type="text/html" id="template_holder"></script> <script type="text/javascript

Passing options to templates in knockout 1.3

阅读更多关于 Passing options to templates in knockout 1.3

问题 In knockoutjs 1.2.1 I could do: <div data-bind="template: {name: 'Bar', foreach: persons, templateOptions:{fooMode: true} }"/> <script id='Bar'> {{if $item.fooMode}} FOO! {{/if}} </script> Which I have tried to translate to knockout 1.3.0beta as <div data-bind="template: {name: 'Bar', foreach: persons, templateOptions:{fooMode: true} }"/> <script id='Bar'> <span data-bind="if: $item.fooMode">FOO!</span> </script> But the new native template engine doesn't respect templateOptions. Is there

Getting two way binding on $data inside a template

阅读更多关于 Getting two way binding on $data inside a template

问题 I am trying to setup generic Knockout templates that can be toggled between edit and readonly mode based on data type. If you've ever used ASP.NET's dynamic data: it's like their field templates. For example: <script type="text/html" id="text">  <input type="text" data-bind="value: $data" />   <span data-bind="text: $data"></span>  </script> This is used like this: <label><input type="checkbox" data-bind=

Can I pass a variable in a template binding?

阅读更多关于 Can I pass a variable in a template binding?

问题 I know this isn't a good method to use long term, but for troubleshooting, is there any way I can pass a simple string while binding a template and then access it as a variable within the template? For instance, if this was my binding:  and this was tmplOne : <div> <span>Fruit: </span> <span data-bind="text: myvar"></span> </div> It would result in the folowing: fruit: apple Even if I have to declare an observable in the viewmodel called

knockout template binding

阅读更多关于 knockout template binding

I have an ul element which is filled through template binding. <script type="text/html" id="someTemplate"> <li> <span data-bind="text: someText"> </li> </script> <ul data-bind="template: {foreach: someElemets, name: 'someTemplate'}"> </ul> But I want the first li-tag would not be li-tag from template but another one with button in it and it will not be connected to someElemets array. If I do in that way <ul data-bind="template: {foreach: someElemets, name: 'someTemplate'}"> <li><button data-bind=click: doSomething">Click me</button></li> </ul> then li-tag with button will be the last one after

Getting two way binding on $data inside a template

阅读更多关于 Getting two way binding on $data inside a template

I am trying to setup generic Knockout templates that can be toggled between edit and readonly mode based on data type. If you've ever used ASP.NET's dynamic data: it's like their field templates. For example: <script type="text/html" id="text">  <input type="text" data-bind="value: $data" />   <span data-bind="text: $data"></span>  </script> This is used like this: <label><input type="checkbox" data-bind="checked: editable" /> Editable</label> <p>Name: <input data-bind="value: name" /></p> <p>Name2: <span

Replace container element when using Knockout component

阅读更多关于 Replace container element when using Knockout component

问题 Is there a way to configure a Knockout component to replace the container element instead of nesting its content inside the container element? For example, if I have a custom component registered as my-custom-element with the following template: <tr> <p>Hello world!</p> </tr> Is it possible to use the component like this: <table> <tbody> <my-custom-element></my-custom-element> </tbody> </table> And have the final product be this: <table> <tbody> <tr> <p>Hello world!</p> </tr> </tbody> </table