2

これまでのところノックアウトとそれを愛するのは初めてで、700行のjQueryの混乱を150行にカットしました。私が本当に好きではない部分の1つは、テンプレートです。これに似たファイルを作成できるようにしたい

module.ViewModel.views = {
   'view1' : '<div data-bind="foreach: data">TEMPLATE</div>'
};

// in my view model set something like 
ViewModel.view1Template = module.ViewModel.views.view1;

// then in my html have
<div data-bind="template: view1Template()"></div>

それが重要な場合は、おそらく口ひげを使ってこれを実行できるようにしたいと思いますが、実際には、HTMLでIDによって直接参照されるのが好きではなく、テンプレートに再利用性を追加したいと思います。これを実行したいもう1つの理由は、ビューフォルダーに口ひげを使用する他のテンプレートがありますが、ノックアウトではなく、すべてのJSテンプレートでフォーマットの一貫性を維持したいということです。

アップデート

以下の答えは、現在私がやりたいことに最も近いもののようです私はそれを少し異なってしました

for (var view in module.views){
    var node = $("<script/>", {
        "type" : "text/html",
        "id" : view,
        "text" : module.views[view]
    }).appendTo("body");
}
4

2 に答える 2

1

要素をDOMに動的に挿入し、後でkoバインディングを適用できます。

var html = $.parseHtml(module.ViewModels.views['view1'])[0];
ko.applyBindings(model, html);
$('#content').append(html);

ライブデモ

http://jsfiddle.net/bikeshedder/VHUcF/

私はあなたの質問の半分しか答えなかったかもしれないことに気づきました。残念ながら、テンプレートバインディングハンドラーはelement id引数としてのみ受け入れ、要素は受け入れません。ただし、これは、バインディングを適用する前にテンプレートをDOMに追加することで簡単に修正できます。

HTML

<script id="templates" type="text/html"></script>

<div id="content" data-bind="template: templates.answerList.id"></div>

JavaScript

var templates = {
    answerList: '<ul class="answer-list" data-bind="template: { name: templates.answer.id, foreach: answers }"></ul>',
    answer: '<div class="answer" data-bind="text: text"></div>'
};

// insert templates into DOM
for (var name in templates) {
    var html = templates[name];
    var element = document.createElement('div');
    $(element).append($.parseHTML(html)[0]);
    element.id = 'tpl_' + name;
    $(element).attr('id', element.id);
    templates[name] = element;
    $('#templates').append(element);
}

answerModel = {
    answers: [
        { text: 1 },
        { text: 42 },
        { text: 667 }
    ],
    templates: templates
};

ko.applyBindings(answerModel, $('#content')[0]);

ライブデモ

http://jsfiddle.net/bikeshedder/VHUcF/1/

于 2013-01-30T19:30:39.600 に答える
0

私はこの問題に対するより良い解決策を思いついたところです。テンプレートを指定するときに「.name」を追加する必要がなくなりました。

HTML

<script id="templates" type="text/html"></script>

<div id="content" data-bind="template: templates.answerList"></div>

JavaScript

var templates = {
    answerList: 'Answers: <ul class="answer-list" data-bind="template: { name: templates.answer, foreach: answers }"></ul>',
    answer: '<li class="answer" data-bind="text: text"></li>'
};

var templateIds = {};

for (var name in templates) {
    var id = 'tpl_' + name;
    $(document.createElement('div'))
        .append($.parseHTML(templates[name]))
        .attr('id', 'tpl_' + name)
        .appendTo('#templates');
    templateIds[name] = id;
}

answerModel = {
    answers: [
        { text: 1 },
        { text: 42 },
        { text: 667 }
    ],
    templates: templateIds
};

ko.applyBindings(answerModel, $('#content')[0]);

ライブデモ

http://jsfiddle.net/bikeshedder/VHUcF/3/

ノート

この試行では、モデル属性として渡すか、グローバルスコープでtemplates定義する必要があります。templates+'と書くこともできますが、"tpl_"これはさらに自然に使用できます。

<div data-bind="template: 'tpl_answers'"></div>

テンプレートを含む要素をHTMLに配置したくない場合はscript、JavaScriptからも作成してください。

于 2013-01-30T21:36:03.487 に答える