Javascript 如何将剔除视图模型移到html页面之外_Javascript_Html_Knockout.js_Templating

Javascript 如何将剔除视图模型移到html页面之外

javascript html knockout.js

Javascript 如何将剔除视图模型移到html页面之外,javascript,html,knockout.js,templating,Javascript,Html,Knockout.js,Templating,如何将使用敲除的javascript代码移到html文件之外？我想创建一个单独的文件，在其中处理所有事情（或尽可能多地处理）。而且模板应该仍然有效。提前谢谢编辑：所做的更改。我在脚本文件夹中添加了require.js，并创建了app.js和viewmodel.js文件。但这仍然行不通。任何帮助都将不胜感激：） EDIT2：差不多了，Rumesh Eranga使用require.js给出了正确的答案。我的装订只剩下一点问题了。”data bind=“text:$（item.name）”不会显示名

如何将使用敲除的javascript代码移到html文件之外？我想创建一个单独的文件，在其中处理所有事情（或尽可能多地处理）。而且模板应该仍然有效。提前谢谢

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

EDIT2：差不多了，Rumesh Eranga使用require.js给出了正确的答案。我的装订只剩下一点问题了。”data bind=“text:$（item.name）”不会显示名称，仅显示“[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>

下面是我的脚本/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) };
}
});

将异步模块定义（AMD）与RequireJs一起使用

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

从网站上引用

HTML

脚本/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);
    };
});

根据上面给出的代码片段，您可以看到，您可以将视图模型代码与html分开，甚至可以模块化，这非常有用。

您不能通过ajax加载外部html部分，然后在加载html文件时，只加载ApplyBinding吗？控制台上有错误吗？我猜，

${$data.name}

是错的。尝试将其更改为

$data.name

稍微更改了foreach以使其更简单：“…foreach:items，as:'item'}”。也改变了这一点：

现在我可以添加项目了，我看到它们在添加。。。但我还是看不到他们的名字，我只能看到“[object]”。我的文本肯定有问题：$（item.name）但我找不到它。。。尝试了很多，我没有控制台错误。。。谢谢你的帮助，我就快到了我想你不必在那里用“$”符号。尝试这应该行得通，鲁梅什·埃兰加又来了！谢谢！：）

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

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

// 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);
    };
});