无法在现有页面中使用淘汰模板

时间:2013-12-11 17:00:55

标签: c# asp.net asp.net-mvc asp.net-mvc-4 knockout.js

我有一个简单的淘汰模板,但因为它在使用淘汰赛的现有页面中,我无法让我的模板正常工作。我没有在页面上看到你好。任何建议都被推荐!谢谢,

代码段

<script type="text/html" id="childtag-template">
    <ul data-bind="template: { name: 'tag-template'}"></ul>
    <div data-bind="template: { name: 'keyword-template'}"></div>  <!-- new bit -->
</script>

模板

<script type="text/html" id="keyword-template">
  hello
</script>

在页面的文档就绪事件中,存在以下内容

加载页面

<script type="text/javascript">
    $(function () {
        window.helper.Start(@Html.Raw(Json.Encode(Model)););
    });

开始的内容在

之下

启动方法

window.Helper= {
    Start: function (x) {
        var viewModel = Helper.XViewModel(x);
        window.Helper.ViewModel = viewModel;
        ko.applyBindings(viewModel);
        ...

当我可以成功加载模板时,我只需要一个直接从敲除示例中获取的简单表单,该表单允许添加和删除列表。我让它独立工作,但是当将标记和js放入现有文件时,我得到了js错误。

更新

我添加了以下更改(请参阅viewModel.Keywords)。 Firefox报告没有错误,但我在页面上看不到我的问候。

window.Helper = {
    Start: function (x) {
        var viewModel = Helper.XViewModel(x);
        window.ArticleManagerHelper.ViewModel = viewModel;
        ko.applyBindings(viewModel);

        viewModel.Keywords = ko.observable();  // new line of code

我已将以下内容添加到模板中

    <input type="text" data-bind="value: Keywords"/>

1 个答案:

答案 0 :(得分:1)

好的,这就是我为了让它发挥作用而做的。

请注意我使用了json的简化版本,所以我可以创建一个有效的jsFiddle,但概念仍然相同。

<!--html -->
<div data-bind="template: { name: 'keyword-template', data: Article }"></div>

<!-- template -->
<script type="text/html" id="keyword-template">
    <input type="text" data-bind="value: Keywords"/>
</script>
  1. 您在模板中定义了两个部分,您需要html中的绑定部分位于模板之外。除非我弄错了并且它是某种嵌套模板并且外部html丢失了,对不起,如果是这种情况。
  2. 我需要指定要绑定到data: Article
  3. 的数据

    以下是jsFiddle的链接:

    http://jsfiddle.net/Yfu2Y/1/