【问题标题】:not able to get knockout template working in an existing page无法让淘汰模板在现有页面中工作
【发布时间】:2013-12-29 18:58:45
【问题描述】:

我有一个简单的剔除模板,但因为它位于使用剔除的现有页面中,所以我的模板无法正常工作。我没有在页面上看到你好。任何建议都适用!谢谢,

代码 sn-p

<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"/>

【问题讨论】:

  • 您能否详细说明您遇到的 JS 错误?
  • 我现在没有收到任何错误,尽管我仍然无法看到我的消息
  • window.helper.Start 应该是 window.Helper.Start 在你的 case...哈哈...我杀了我。
  • 你能发布序列化时的视图模型是什么吗?所以我可以创建一个小提琴。
  • 我可以在哪里临时发布一个长字符串?

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


【解决方案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

这里是 jsFiddle 的链接:

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

【讨论】:

  • 谢谢,我已经进行了更改,但得到的响应与以前相同?? (即“你好”没有出现在页面上)
  • window.helper.Start 应该是 window.Helper.Start 在你的“案例”中......哈哈......我杀了我......两次!
  • 更新了更多信息,请尝试一下。 :)
  • 谢谢,但我在页面上同样缺少任何东西:(我的模板中只是有“你好”
  • 嗨詹姆斯,让它在一个简化的 jsFiddle 中工作。请参阅我更新的答案。 :)
猜你喜欢
  • 2014-01-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-04-21
相关资源
最近更新 更多