Question

我正在尝试将viewmodel与KnockoutJS中的html页面相关联。

viewmodel在外部文件中定义。并且html页面引用了这个viewmodel。我正在使用requirejs来加载文件依赖项。

＆＃13;

define(['knockout-latest'], function (ko) {
	var SimpleListModel = function(items) {
		this.items = ko.observableArray(items);
		this.itemToAdd = ko.observable("");
		this.addItem = function() {
			if (this.itemToAdd() != "") {
				this.items.push(this.itemToAdd()); // Adds the item. Writing to the "items" observableArray causes any associated UI to update.
				this.itemToAdd(""); // Clears the text box, because it's bound to the "itemToAdd" observable
			}
		}.bind(this);  // Ensure that "this" is always this view model
	};
	 
	ko.applyBindings(new SimpleListModel(["Alpha", "Beta", "Gamma"]));
	//return SimpleListModel;
});

＆＃13;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="styles.css" />
		<script type="text/javascript" src="knockout-latest.js"></script>
		<script type="text/javascript" data-main="viewmodel" src="require.js"></script>
		<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="viewmodel.js"></script>
	</head>	
<body>
<form data-bind="submit: addItem">
    New item:
    <input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' />
    <button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button>
    <p>Your items:</p>
    <select multiple="multiple" width="50" data-bind="options: items"> </select>
</form>
</body>
</html>

＆＃13;

我收到以下错误： require.js:5 Uncaught Error: Mismatched anonymous define() module

我想知道如何将html页面及其viewmodel加入单独的文件中。

Answer 1

查看您发布的代码，您可以获得指向页面上列出的脚本文件的链接。使用RequireJS，应删除脚本文件列表，并且只有RequireJS和用于应用程序入口点的脚本应包含在页面中。应用程序入口点可以是<script>标记，也可以是RequireJS data-main标记中的<script>属性。

我将您的代码复制到此example in plunker。我还将视图模型移动到knockout component并使用RequireJS text plugin加载HTML。在main.js中，有一个require.config（）调用，用于设置指向CDN的text和knockout模块的路径。路径也可以指向本地文件，但请注意，knockout和text的<script>标记不在index.html文件中。 RequireJS将根据define()调用确定依赖关系时动态添加它们。

淘汰赛 - 使用viewmodel加入模板

1 个答案: