如何将 Knockout 视图模型移到 html 页面之外答案

【问题标题】：How to move Knockout viewmodel outside html page如何将 Knockout 视图模型移到 html 页面之外
【发布时间】：2015-02-03 14:52:40
【问题描述】：

如何将使用敲除的 javascript 代码移到 html 文件之外？我想创建一个单独的文件来处理所有内容（或尽可能多地）。模板也应该仍然有效。提前致谢！

编辑：所做的更改。我在我的 Scripts 文件夹中添加了 require.js 并创建了 app.js 和 viewmodel.js 文件。但这仍然行不通。任何帮助将不胜感激:)

EDIT2：几乎就在那里，Rumesh Eranga 使用 require.js 给出了正确答案。我的装订只剩下一点问题。 'data-bind="text: $(item.name)"' 不会显示名称，只会显示 '[object Object]'。

EDIT3：已解决！

这是 HTML 文件：

<head>
<script type="text/javascript" data-main="Script/app.js" src="Scripts/require.js"></script>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="Scripts/jquery.tmpl.js"></script>
<script id="shoppingItemTemplate" type="text/html">
    <li><span data-bind="text: item.name"></span></li>
</script>

<div id="ActiveShoppingList">
<h2>Shopping items</h2>
<div id="ActiveList">
    <ul data-bind="template: {name:'shoppingItemTemplate', foreach: items, as:'item'}"></ul>
    <button data-bind="click:addItem">Add item</button>
</div>
</div>
</body>

这是我的脚本/app.js：

require(['knockout-3.2.0', 'viewmodel'], function(ko, viewmodel) {
ko.applyBindings(new viewmodel);
});

这是我的脚本/viewmodel.js：

define(['knockout-3.2.0'], function(ko) {
return function viewmodel (){
    this.items = ko.observableArray([new item("item1"), new item("item2")]);
    this.addItem = function()
        {
            this.items.push(new item("new item"));
        };
};

function item(name)
{
    return { name: ko.observable(name) };
}
});

【问题讨论】：

难道你不能通过 ajax 加载外部 HTML 部分，然后在加载该 HTML 文件时，只在那时 applyBindings 吗？

标签： javascript html knockout.js templating

【解决方案1】：

在 RequireJs 中使用异步模块定义 (AMD)。

关于 Require 和 knockout 的好文章可以找到 here。

引自网站。

HTML

<html>
    <head>
        <script type="text/javascript" data-main="scripts/init.js" src="scripts/require.js"></script>
    </head>
    <body>
        <p>First name: <input data-bind="value: firstName" /></p>
        <p>First name capitalized: <strong data-bind="text: firstNameCaps"></strong></p>
    </body>
</html>

范围/init.js

require(['knockout-x.y.z', 'appViewModel', 'domReady!'], function(ko, appViewModel) {
    ko.applyBindings(new appViewModel());
});

脚本/appViewModel.js

// Main viewmodel class
define(['knockout-x.y.z'], function(ko) {
    return function appViewModel() {
        this.firstName = ko.observable('Bert');
        this.firstNameCaps = ko.pureComputed(function() {
            return this.firstName().toUpperCase();
        }, this);
    };
});

根据上面给出的代码sn-p，你可以看到你可以将你的视图模型代码从html中分离出来，甚至可以模块化，这很有帮助。

【讨论】：

控制台有错误吗？我的猜测是
${$data.name}
$data.name

稍微更改了 foreach 以使其更简单：“... foreach: items, as:'item'}”。也改变了这个：

现在我可以添加项目，我看到它们加起来了......但我仍然没有'看不到他们的名字，我只能看到'[object Object]'。我的文字一定有问题：$（item.name）但我找不到它...尝试了很多，我没有控制台错误...感谢您的帮助，我快到了！ :D