开发者

Can knockout.js use templates to generate templates?

开发者 https://www.devze.com 2023-03-14 08:47 出处:网络
I\'m trying to use knockout to templates to generate templates. Along the lines of Html: <script id=\"searchField-template\" type=\"text/html\">

I'm trying to use knockout to templates to generate templates.

Along the lines of

Html:

<script id="searchField-template" type="text/html">
    <li data-bind="text: name"></li>
</script>

<script id="template-template"  type="text/html">
    <ul data-bind="template: { name: 'searchField-template', foreach: ${name} }" ></ul>
</script>    

JS:

var viewModel = {
    Title: [{
        name: "Title1"}开发者_高级运维,
    {
        name: "Title2"},
    {
        name: "Title3"}],
    Manager: [{
        name: "Manager1"},
    {
        name: "Manager2"},
    {
        name: "Manager3"}],

    Defn: [{
        name: "Title"},
    {
        name: "Manager"}]

};

ko.applyBindings(viewModel);

runnable sample here: http://jsfiddle.net/scottwww/yQZUE/2/

It seems that the problem is with how curly braces are interpreted.

Any suggestions?


Here you go >

http://jsfiddle.net/vwP3w/2/


Not sure this is the right way, but a reference to the vm helps.

http://jsfiddle.net/scottwww/vwP3w/1/

HTML:

<div data-bind="template: { name: 'template-template', foreach: Defn }"></div>

<script id="searchField-template" type="text/html">
    <li data-bind="text: name"></li>
</script>

<script id="template-template"  type="text/html">
    <ul data-bind="template: { name: 'searchField-template', foreach: vm[$data.name] }" ></ul>
</script>    

JS:

var viewModel = {
    Title: [{
        name: "Title1"},
    {
        name: "Title2"},
    {
        name: "Title3"}],
    Manager: [{
        name: "Manager1"},
    {
        name: "Manager2"},
    {
        name: "Manager3"}],

    Defn: [{
        name: "Title"},
    {
        name: "Manager"}]

};
window.vm = viewModel;
ko.applyBindings(viewModel);


use the $data variable inside the nested template.

http://jsfiddle.net/dwick/yQZUE/3/

0

精彩评论

暂无评论...
验证码 换一张
取 消