README

Consistent是一个小巧简单的JavaScript框架，它可以将抽象模型与DOM同步。Consistent旨在让已经使用jQuery的开发者更容易使用和理解，并且不会阻止你在同一时间使用jQuery。

简介

使用Consistent创建一个作用域，然后将DOM节点绑定到它。Consistent会检查DOM节点（及其子节点）以了解如何将它们与作用域相关联。

作用域最初没有属性。您向作用域添加属性，然后将其应用于DOM。在您的HTML标记中，您添加data-ct-*属性来告诉Consistent如何使用作用域的属性。

作用域包含一个$属性，其中Consistent存储其函数和作用域。例如，当您想应用作用域时，您调用scope.$.apply()。这个$属性将您添加到作用域中的属性与Consistent分开，因此您可以添加任何其他名称的属性。请注意，这个$与jQuery无关，它包含在作用域中，因此不会与其冲突。

作用域包含标量值，如布尔值、字符串和数字，以及返回计算值的值函数。作用域还包含您创建的任何事件处理函数。为了将事件处理程序与您的值分开，它们存储在以$开头的属性中，例如$handleClick。

Consistent包含一个jQuery插件，下面的示例展示了这种方法。然而，Consistent不要求使用jQuery，也可以不使用它。

<script src="consistent.js"></script>
<script src="jquery.consistent.js"></script>

替换

将h1元素绑定到作用域中的title键。

<h1 data-ct="title"></h1>

现在使用jQuery插件创建一个作用域，并为其分配一个值。

var scope = $("h1").consistent();
scope.title = "Consistent.js";
scope.$.apply();

现在h1元素的内容将更改为"Consistent.js"。

请注意，在作用域中更改属性后，您需要调用apply来指示Consistent更新DOM。您也可以这样应用作用域的变化，这与以下操作等价

var scope = $("h1").consistent();
scope.$.apply(function() {
	this.title = "Consistent.js";
});

或者甚至以下操作，因为Consistent中的大多数操作都是链式的

$("h1").consistent().$.apply(function() {
	this.title = "Consistent.js";
});

请注意，如果作用域属性未定义，Consistent不会更改DOM。

Consistent如何将作用域值应用到DOM取决于元素。对于大多数元素，innerHTML被设置为作用域值。以下有一些例外

<input>、select和textarea元素会根据需要设置值或勾选。请参阅以下表单。
<img>会设置其src属性

模板化

Consistent支持可插拔的模板引擎。下面的示例使用Hogan。任何提供compile(string)和render(object)方法的模板引擎都可以使用。

<h1 data-ct-tmpl="Welcome to {{name}}"></h1>

现在配置Consistent使用Hogan作为其模板引擎，并填充作用域。

Consistent.defaultOptions.templateEngine = Hogan;
var scope = $("h1").consistent();
scope.name = "Consistent.js";
scope.$.apply();

您也可以通过id引用模板，而不是将其内联写入

<h1 data-ct-tmpl-id="h1-template"></h1>

<script id="h1-template" type="text/x-hogan-template">
	Welcome to {{name}}
</script>

请注意，Consistent会在每次应用作用域时重新渲染模板，从而重新创建DOM节点。

如果您需要创建一个大的DOM结构并将其绑定到作用域，请考虑首先使用模板创建它，然后使用Consistent绑定。

可见性

Consistent可以根据范围显示和隐藏节点。

<h1 data-ct-show="showTitle">My title</h1>

您还可以使用data-ct-hide在范围属性为true时隐藏元素。

现在创建一个范围并设置showTitle属性。Consistent将使用display:none样式显示或隐藏元素。Consistent在重新显示时也会恢复旧的display值，以防它被设置为特定值。

var scope = $("h1").consistent();
scope.showTitle = true;
scope.$.apply();

您可以覆盖显示和隐藏元素的默认行为。例如，您可能希望元素渐显渐隐。有关更多信息，请参阅选项部分。

值函数

除了向范围添加标量值外，您还可以添加值函数。在这种情况下，函数将在应用范围时每次执行，并使用其返回值。值函数允许动态计算范围值。

<div id="container">
	<p>The number of people is <span data-ct="numberOfPeople">&nbsp;</span>.</p>
</div>

上面的 有时对于IE 6（还有人在用吗？）是必要的，否则它将折叠<span>周围的空白，您可能会得到奇怪的间距。

var scope = $("#container").consistent();
var people = [ "Albert", "Bob", "Carl", "Donald" ];
scope.numberOfPeople = function() {
	return people.length;
};
scope.$.apply();

值函数将在没有参数的情况下以this设置为范围的方式被调用。至于其他范围属性，如果值函数返回undefined，则不会对DOM进行任何更改。

表单元素

表单元素的工作方式如您预期：Consistent会从范围更新它们的值。

<input type="text" name="email">
<input type="checkbox" name="optin">

现在创建一个范围并设置输入元素的值。

var scope = $("input").consistent();
scope.email = "example@example.com";
scope.optin = true;
scope.$.apply();

所有表单元素都受支持，包括文本字段、复选框、单选按钮、选择列表和文本区域。

Consistent会自动监听表单元素的change事件。当change事件触发时，Consistent更新并应用范围。您可以通过在options对象中将autoListenToChange设置为false来关闭此行为，无论是创建范围时还是绑定表单元素时。

禁用和只读

您可以控制表单元素的disabled和readOnly属性。

<input type="text" name="email" data-ct-disabled="locked">

scope.locked = true;

在这种情况下使用值函数通常很有用，以便每次应用范围时动态计算表单元素的禁用状态。

以下是控制disabled属性的方法，完整的列表如下：

data-ct-disabled
data-ct-enabled
data-ct-readonly
data-ct-readwrite

请注意，对于禁用和只读，每个都有一个相反的属性，以便您可以根据模型最佳选择选项。

事件

Consistent可以向DOM节点添加事件监听器，这些监听器调用范围中的函数。当您将事件处理函数放入范围时，其名称前会添加一个$前缀，以区分模型值和函数。在指定DOM中的函数时，不需要包含$前缀。

<a href="#" data-ct-bind-click="handleClick">Click me</a>

现在创建一个范围并提供点击处理程序。请注意，在DOM中处理程序是handleClick，但在范围中定义它时是$handleClick。

var scope = $("a").consistent();
scope.$handleClick = function(ev) {
	ev.preventDefault();
	alert("Click!");
};

处理函数将以this作为接收事件的元素被调用，就像jQuery一样。该函数还有第二个参数，即范围，以防您需要它。

scope.$handleClick = function(ev, scope) {
	scope.clickCount++;
	scope.$.apply();
};

请注意，在范围中定义事件处理程序后，我们不需要调用apply，因为我们不需要更改DOM。事件监听器将在DOM节点绑定到范围时添加，您只需确保处理函数在调用时已经定义即可。

快捷键

有一种绑定事件的快捷方式，即省略事件名称。这对于大多数元素选择的是click事件。

<a href="#" data-ct-bind="handleClick">Click me</a>

以下是一些特殊情况：

<input>和<textarea>元素绑定change事件。
<form>元素绑定submit事件。

重复块

如果您的范围包含数组值，您可以通过重复DOM节点块来表示它们。

<ul>
	<li data-ct-rep="people" data-ct="name"></li>
</ul>

var scope = $("ul").consistent();
scope.people = [
	{ name: "Alfred" },
	{ name: "Bob" },
	{ name: "Carl" }
];
scope.$.apply();

这将生成一个包含三个<li>元素的列表，每个元素对应于scope.people数组中的一个人。如果你更改数组，DOM将更新。

scope.people.push({ name: "Donald" });
scope.$.apply();

或者删除一个项目

scope.people.splice(0, 1);
scope.$.apply();

Consistent仅在数组中添加新项目时才会创建新节点。因此，你在Consistent之外对DOM所做的任何更改都将被保留，例如应用类。

Consistent为每个重复块创建一个子作用域，数组中的对象成为其作用域。因此，数组中的每个对象都会添加一个包含Consistent作用域功能的$属性。由于数组中的对象是子作用域，你可以通过原始作用域中的原始数组访问子作用域。

请参阅父作用域部分，以获取有关父作用域和子作用域的基本信息。

重复会克隆重复的元素，包括其所有子元素

<table>
	<tr data-ct-rep="people">
		<td>Person #<span data-ct="index"></span></td>
		<td data-ct="name"></td>
		<td data-ct="address"></td>
	</tr>
</table>

scope.index = function() {
	return this.$.index;
};

注意，作用域包含一个属性scope.$.index，它包含当前重复块的0基于索引。你不能直接从DOM访问此属性，因为它在$对象内部，但你可以使用值函数来访问它（如果你想使索引为基于1，则还可以将其加1）！

这里发生了一个有趣的现象，在阅读了父作用域部分后会更加清晰。将scope.index值函数添加到父作用域中。每个重复块都获得一个子作用域，当它查找index属性时，会回退到父作用域。在父作用域中调用值函数时，this被设置为子作用域。因此，return this.$.index返回子作用域的索引。

还可以重复一组元素。请参阅高级部分中的重复多个元素。

属性

您可以从作用域中设置DOM元素的属性。

<h1 data-ct-attr-class="titleClass">Title</h1>

现在创建一个作用域并设置标题的类。

var scope = $("h1").consistent();
scope.titleClass = "large";
scope.$.apply();

现在将“large”类应用于h1元素。

您还可以设置DOM元素的属性，请参阅下面的属性部分。

模板化

您还可以使用模板来更新属性。

<h1 data-ct-tmpl-attr-class="heading {{titleClass}}">Title</h1>

<h1 data-ct-tmpl-id-attr-class="h1-class-template">Title</h1>
<script id="h1-class-template" type="text/x-hogan-template">heading {{titleClass}}</script>

绑定到DOM节点

在上面的示例中，我们特别针对示例节点，这在实际中并不现实。当你将DOM节点绑定到Consistent时，所有子节点也将被绑定。因此，通常你会绑定一个容器元素。

<div id="container">
	<h3 data-ct="name"></h3>
	<p data-ct="body"></p>
</div>

现在绑定作用域。

$("#container").consistent();

通常你将在页面上有多个块，并且你需要为每个块有一个独立的作用域。

<div class="container">
	<p data-ct="body"></p>
</div>
<div class="container">
	<p data-ct="body"></p>
</div>

现在将每个块绑定到一个新的作用域。

$(".container").each(function() {
	var scope = $(this).consistent();
	scope.body = "Lorem ipsum";
	scope.$.apply();
});

获取DOM节点的范围

如果你需要获取节点的现有作用域，你可以遵循相同的模式。再次调用.consistent()将返回现有作用域。

$(".container").each(function() {
	var scope = $(this).consistent();
	scope.body = "Change the body";
	scope.$.apply();
});

你也可以调用Consistent.findScopeForNode(node)函数，如果你只想检查是否有作用域而不是创建一个。

从DOM更新作用域

Consistent可以检查DOM以填充作用域。

var scope = $("#container").consistent();
scope.$.update();

注意，这不能用于使用模板的任何属性。

监视作用域中的更改

注册一个处理函数来监视特定属性或整个作用域的更改。监视处理函数在调用作用域上的apply之前被调用。

scope.$.watch("title", function(key, newValue, oldValue) {
	this.shortTitle = this.title.substring(0, 10);
});

scope.$.watch(function(changedKeys, snapshot, oldSnapshot) {
	this.changeSummary = "The following keys were changed: " + changedKeys;
});

传递给监视处理函数的整个作用域的快照是使用scope.$.snapshot函数创建的，因此不包含$对象、事件处理程序和值函数已被替换为其值。

请注意，如果你在监视处理程序内部更改作用域，则不需要调用apply。如果作用域被其他监视处理程序更改，监视处理程序可以在单个apply中多次被调用。

根据其值来监视值函数。如果值函数在两次应用之间返回的值发生变化，则将调用监视器处理函数。

如果作用域未达到稳定状态，监视器可能会引起无限循环。这尤其可能发生在你使用每次评估都返回新值的值函数时。Consistent通过监视器列表检测过度循环，并抛出异常来中断循环。循环次数在Consistent.settings.maxWatcherLoops中设置；默认值应该足够。

从另一个对象填充作用域

通常，你会从Ajax JSON响应中接收到JavaScript对象。你可以使用merge函数将这些对象合并到作用域中。

var scope = $("#item").consistent();
$.ajax({
	success: function(data) {
		scope.$.merge(data);
	}
})

请注意，合并是浅层合并。对于给定对象中的每个键，它将其添加到作用域中，替换已经存在的值。如果你的作用域有嵌套对象，它们将被替换而不是合并。

将作用域快照到JavaScript对象

作用域包含一些Consistent所需的额外属性。特别是包含所有Consistent功能的$对象（例如scope.$.apply()）。它还包含事件处理函数（属性名以$开头），它们不是你的模型数据的一部分。最后，它包含用于确定其当前值的值函数。

为了获取只包含模型属性的JavaScript对象，请使用snapshot函数。它将返回一个新的对象，排除$对象和任何以$符号开头的键。它还将评估所有值函数并包含它们的当前值。

var scope = $("#item").consistent();
scope.$.update();
$.ajax({
	data: scope.$.snapshot()
});

snapshot函数包含父作用域的属性。如果你不希望包含父作用域，请使用snapshotLocal代替。

许可证

Consistent在Apache License, Version 2.0下发布。

兼容性

Consistent在所有现代浏览器中工作。它还在IE 6、7和8中进行了测试，并且完整工作。

原则

未定义

如果作用域属性未定义，则Consistent不会更改DOM。

高级

嵌套属性

你可以在作用域中使用嵌套属性。

<h1 data-ct="person.fullName"></h1>

var scope = $("h1").consistent();
scope.person = {
	fullName: "Nathanial Hornblower"
};
scope.$.apply();

监视器处理函数将使用嵌套属性名作为key被调用，例如person.fullName。为了方便起见，作用域声明了两个用于处理嵌套属性名的函数。

var nestedPropertyName = "person.fullName";
scope.$.get(nestedPropertyName);
scope.$.set(nestedPropertyName, value);

当调用set时，如果适当的中间对象不存在，它们将被创建并添加到作用域中。

请注意，get将回退到父作用域（如果存在）。有关父作用域的说明，请参阅以下内容。如果你不希望回退到父作用域，请使用getLocal代替。

父作用域

你可以创建子作用域。子作用域将查找其父作用域，如果它们不包含给定属性键的值，以填充DOM节点或查找事件处理函数。这包括值函数。请注意，值函数内的this将是子作用域，而不是定义它的作用域。

当在子作用域上调用apply()时，它将自动调用其父作用域的apply()。

添加到父作用域的监视器处理函数将触发子作用域中的更改。请注意，监视函数内的this将是子作用域，而不是定义它的作用域。

var rootScope = $.consistent(); /* Create the root scope */
var childScope = $.consistent(rootScope); /* Create a child scope */
$("#item").consistent(childScope); /* Bind a DOM node to the child scope */

请注意，我们必须先创建作用域，然后再绑定DOM节点，而不是像其他示例那样同时进行。这是因为如果你将作用域作为带有选择器的表单参数传递，它将把那个作用域视为要绑定的作用域。你必须调用$.consistent函数来创建一个新的带有父元素的作用域。请注意，$.consistent和Consistent是同一个函数。

现在以下代码将正常工作。

<div id="item">
	<h2 data-ct="title"></h2>
</div>

rootScope.title = "Default title";
childScope.$.apply();

然后，如果你给子作用域添加一个标题并再次应用，它将覆盖父作用域中的标题属性。

事件处理器也有效。记住，事件处理器接收一个额外的参数，即作用域。当使用父作用域时，这一点尤为重要，因为该参数将包含触发作用域，即使事件处理器是在父作用域中声明的。

<div id="item">
	<h2 data-ct="title" data-ct-bind-click="handleClick"></h2>
</div>

rootScope.$handleClick = function(ev, scope) {
	// scope === childScope
	scope.title += ".";
};

获取绑定到作用域的节点

如果你需要获取已绑定到作用域的DOM节点，你可以使用nodes，它返回所有已绑定的DOM节点，或者使用roots，它只返回显式绑定的DOM节点——与作为显式绑定节点子节点的那些节点相反。

$(scope.$.nodes()).addClass("found");
$(scope.$.roots()).addClass("found");

重复多个根元素

上面的重复块部分介绍了重复。在那个例子中，你只能重复单个根元素，如<li>或<tr>。Consistent还支持重复多个根元素块，这在你想为每个块向表中添加多个表格行时非常有用。

<table>
	<tr data-ct-rep="people" data-ct-rep-container-id="rows"></tr>
</table>

<table style="display:none">
	<tbody id="rows">
		<tr>
			<td>Name</td>
			<td data-ct="name"></td>
		</tr>
		<tr>
			<td>Address</td>
			<td data-ct="address"></td>
		</tr>
	</tbody>
</table>

使用data-ct-rep-container-id属性，你可以识别DOM中其他地方应该被克隆并用于重复块中的节点。请注意，即使没有在标记中，表格也会自动创建一个<tbody>元素，因此你应该将id附加到一个显式的<tbody>上，否则如果id在<table>上，重复块将包括自动创建的<tbody>。

属性

你可以从作用域设置DOM元素属性。属性是DOM节点的JavaScript属性，而不是在标记中声明的属性。最常用的属性是style属性，它公开一个包含DOM元素样式的对象。

<p data-ct-prop-style-display="showHide">Lorem ipsum</p>

请注意，属性可能是嵌套的，就像上面的style.display情况一样，我们可以通过在声明data-ct-prop-属性时使用-来分隔属性名来指定这一点。

var scope = $("p").consistent();
scope.showHide = "none";
scope.$.apply();

这会将<p>元素的style.display属性设置为"none"，导致它不被显示。

请参阅上面的可见性部分以获取显示和隐藏元素更好的方法。

选项

可见性动画

通常你想要使用动画来显示或隐藏元素。你可以在创建作用域或绑定节点时指定选项来覆盖显示和隐藏的行为。

var scope = $("h1").consistent({
	$: {
		show: function(dom) {
			// jQuery fade
			$(dom).fadeIn();
		},
		hide: function(dom) {
			// jQuery fade
			$(dom).fadeOut();
		}
	}
});

你也可以指定特定apply的显示/隐藏实现。

scope.$.apply({
	$: {
		show: function(dom) {
			// jQuery fade
			$(dom).fadeIn();
		}
	}
});

重复块动画

如果你想要在重复部分中动画化块的显示和消失，你可以在添加节点后和移除节点时覆盖行为。

var options = { $: {} };
options.$.added = function(dom) {
	// jQuery hide and fadeIn
	$(dom).hide().fadeIn();
};
options.$.remove = function(dom) {
	// jQuery fade then remove
	$(dom).fadeOut(function() {
		$(this).remove();
	});
};
var scope = $("#container").consistent(options);

参考

DOM属性

绑定值

data-ct用于设置此元素值的作用域中属性的名称。这里的设置值意味着设置innerHTML或其他适用于元素类型的属性。
data-ct-tmpl一个模板，它将以作用域为其上下文进行渲染，然后用于设置此元素的值。
data-ct-tmpl-id包含模板文本的DOM元素的id，例如一个<script type="text/x-hogan-template">元素。

表单属性

data-ct-disabled当作用域中命名的属性为true时，使此元素禁用。
data-ct-enabled当作用域中命名的属性为true时，使此元素可用。
data-ct-readonly当作用域中命名的属性为true时，使此元素为只读。
data-ct-readwrite 当作用域内的指定属性为真时，使此元素非只读。

属性和属性

以下列表中的 NAME 段代表属性或属性的名称。对于属性，名称将把 -s 改为 .s 以便访问嵌套属性，例如 data-ct-prop-style-display 影响到 style.display 属性。

data-ct-attr-NAME 在作用域中用作设置此元素给定属性值的属性的名称。
data-ct-prop-NAME 在作用域中用作设置此元素给定属性值的属性的名称。
data-ct-tmpl-attr-NAME 一个模板，将以其作用域为其上下文进行渲染，然后用于设置此元素上给定属性的值。
data-ct-tmpl-id-attr-NAME 包含模板文本的 DOM 元素的 id。

可见性

data-ct-show 当作用域内的指定属性为真时显示此元素，否则隐藏它。
data-ct-hide 与 show 相反。

事件处理器

data-ct-bind 将此元素的默认事件绑定到作用域中命名的处理函数。
data-ct-bind-EVENT 将此元素的名为 EVENT 的事件绑定到作用域中命名的处理函数。

重复块

data-ct-rep 将此元素及其所有子元素重复作用域中名为属性的数组的每个项。
data-ct-rep-container-id 包含要在其位置重复此元素的 DOM 节点的 DOM 元素的 id。

作用域函数

所有作用域函数都嵌套在 $ 对象中，因此您可以通过，例如 scope.$.apply() 来调用它们。

DOM

apply([options, ] [function]) 将作用域应用于 DOM。如果提供了可选的选项，它们将在应用作用域之前增强每个节点的选项。如果提供了函数参数，则在应用作用域之前调用该函数，并将 this 设置为作用域。
applyLater([options, ] [function]) 与 apply 类似，但不是立即应用，而是创建一个具有 0 时间的 setTimeout，以便在当前 JavaScript 事件处理完成之后调用。如果提供了函数，则立即调用该函数。可以多次调用此函数，作用域只应用一次。
needsApply() 如果作用域已更改并且需要应用于 DOM，则返回 true。更改包括在作用域中更改的属性或绑定到作用域的新节点。
update() 通过从 DOM 读取键和值来更新作用域。
bind(dom [, options]) 将给定的 DOM 节点绑定到作用域。有关可选的选项参数，请参阅选项部分。参数 dom 也可以是节点数组的数组。
unbind(dom) 将给定的 DOM 节点从作用域中解绑。参数 dom 也可以是节点数组的数组。
nodes() 返回一个绑定到此作用域的 DOM 节点数组。
roots() 返回一个数组，包含显式绑定到此作用域的 DOM 节点，即传递给 bind 函数的节点。

作用域

snapshot() 返回一个包含作用域模型属性的 JavaScript 对象，不包括 Consistent 的 $ 对象、任何以 $ 前缀的属性（事件处理器）以及评估值函数和用它们的当前值替换。
snapshotLocal() 与 snapshot 相同，但不包括父作用域。
merge(object) 将给定对象中的属性合并到作用域中。
replace(object) 用给定对象替换作用域。实际上使用给定对象作为作用域，并在新对象中添加 Consistent 的 $ 对象。返回值是给定的对象。
clear() 从作用域中删除所有属性。这仅留下 Consistent 的 $ 对象。
get(key) 返回给定键作用域中的值。支持嵌套键（例如包含点符号的键）并回退到父作用域。如果作用域包含给定键的值函数，则将其评估并返回其结果。
getLocal(key) 与 get 类似，但不回退到父作用域。
set(key, value) 设置给定键作用域中的值。支持嵌套键。
getEventHandler(key) 返回给定键作用域中的事件处理器。支持嵌套键并回退到父作用域。将 $ 前缀添加到键的最后一部分，因为事件处理器是以 $ 前缀存储的，例如 people.$handleClick。
getLocalEventHandler(key) 与 getEventHandler 类似，但不回退到父作用域。
setEventHandler(key) 设置给定键作用域中的事件处理器。支持嵌套键。将 $ 前缀添加到键的最后一部分。

监视

watch([key,] function) 将给定的处理函数作为监视函数添加到键，如果提供了键，否则添加到整个作用域。
unwatch([key,] function) 解除监视函数的绑定。

通用

parent() 返回父作用域，如果没有父作用域则返回 null。
options(node) 返回给定节点的选项对象。

作用域属性

作用域在 $ 对象内部公开了一些属性，例如 scope.$.index。

index 给定作用域在重复部分中的基于0的索引，如果没有在重复部分中则为 undefined。

一致性函数

Consistent([options]) 返回一个新的作用域。如果提供了选项，则使用这些选项初始化作用域。
Consistent(parentScope [, options]) 返回一个新的作用域并设置其父作用域。如果提供了选项，则使用这些选项初始化作用域。
Consistent(node) 返回绑定到DOM节点的范围，或返回 null。
Consistent.isScope(object) 如果给定的对象是 Consistent 作用域，则返回 true。

jQuery 插件

$.consistent 与上面的 Consistent 函数同义，可以使用相同的方式使用。
$(selector).consistent() 检查所选元素是否已绑定到作用域。如果它们都绑定到同一作用域，则返回该作用域。如果它们绑定到不同的作用域（或者一些已绑定而一些未绑定），则抛出异常。如果没有绑定到作用域，则创建一个新的作用域，绑定元素并返回该作用域。
$(selector).consistent(options) 使用给定的选项创建一个新的作用域，将所选元素绑定到它并返回该作用域。
$(selector).consistent(scope [, options]) 将所选节点绑定到给定的作用域，如果提供了选项则使用这些选项，并返回该作用域。

Consistent 不做什么

Consistent 不创建 DOM 节点。有一些优秀的工具可以创建 DOM 节点，例如简单地使用 jQuery 或使用模板引擎，如 Mustache 或 Hogan（我在示例中使用了它）。您可以轻松地创建新的 DOM 节点，然后将新的 Consistent 作用域绑定到它们。请注意，如果是在模板中创建它们，Consistent 实际上会创建 DOM 节点；然而，有关此内容的建议请参阅模板部分。

Consistent 不执行任何 Ajax。Consistent 作用域可以轻松地从 Ajax JSON 响应中填充，并且它们的数据可以轻松快照以发送到服务器。分别查看 scope.$.merge(object) 和 scope.$.snapshot() 函数。

karlvr / consistent.js

维护者

详细信息