Javascript 在样板JS中传递KnockoutJS视图模型
嵌套组件也以嵌套视图模型为前提 但是,在示例组件中,我没有看到这种依赖关系(BackboneJS TODO应用程序除外,对于KO用户来说,它不是很清楚) 您能否详细说明如何进行此类设计,例如,对于一个系列:Javascript 在样板JS中传递KnockoutJS视图模型,javascript,boilerplatejs,Javascript,Boilerplatejs,嵌套组件也以嵌套视图模型为前提 但是,在示例组件中,我没有看到这种依赖关系(BackboneJS TODO应用程序除外,对于KO用户来说,它不是很清楚) 您能否详细说明如何进行此类设计,例如,对于一个系列: ItemViewModel带有属性Name和IsSelected CollectionViewModelwith具有一个Items属性,该属性包含ItemViewModel和SelectedCount的集合,该集合通过计算所选项目的数量来计算。(我知道这可以用一种更简单的方法用KO来完成,
带有属性ItemViewModel
和Name
IsSelected
with具有一个CollectionViewModel
属性,该属性包含Items
和ItemViewModel
的集合,该集合通过计算所选项目的数量来计算。(我知道这可以用一种更简单的方法用KO来完成,但为了说明起见SelectedCount
ko.applyBindings()
进行绑定)-这意味着您可以将VM任意嵌套到父对象中(正如@Hasith所说)。您只需将一个父对象传递回样板文件。请容忍一些过度注释的代码:
// Let's assume you have your items nicely formatted in an array
// data source (and technically the objects in this array can be
// considered 'dumb' viewmodels)
var items = [
{Name:'a',isSelected:false},
{Name:'b',isSelected:true}
]
// We can apply some bindings to make 'smarter' viewmodels
// One approach is just to map using rocking KO mapping plugin
var koMapItems = ko.mapping.fromJS( items )
// You could skip the mapping plugin and go for broke
// creating your own VM mappings manually
// (you could do this using the mapping plugin with less work)
var goforbrokeVM = function( item )
{
var _name = ko.observable( item.Name )
var _dance = function() { return _name+' is space monkey' }
return {
Name: _name,
isSelected: ko.observable( item.isSelected ),
spaceMonkey: _dance
}
}
// Don't forget to assign and create your goforbrokeVMs
var epicItemVMs = []
for (var i=0;i<items.length;i++)
epicItemVMs.push( new goforbrokeVM( items[i]) )
// Now the interesting part, lets create a 'child' VM that
// we can embed in another VM. Notice this VM has as a
// property an array of VMs itself.
var childVM = {
elements: epicItemVMs,
// A sub method, because we can
otherMethod: function() { return 'wat' }
}
// And ultimately our 'master' VM with its own properties
// including the nested child VM we setup above (which you'll
// remember contains its own sub VMs)
var ParentVM = {
// And its own property
parentPropA: ko.observable('whatever'),
// Oooow look, a list of alternative ko.mapping VMs
simpleMappedItems: koMapItems,
// And a nested VM with its own nested goforbrokeVMs
nested: childVM
}
// Apply your master viewmodel to the appropriate DOM el.
ko.applyBindings( ParentVM, document.getElementById('items'))
//假设您的项目在一个数组中的格式很好
//数据源(从技术上讲,此数组中的对象可以是
//被认为是“愚蠢的”视图模型)
可变项目=[
{Name:'a',isSelected:false},
{Name:'b',isSelected:true}
]
//我们可以应用一些绑定来创建“更智能”的视图模型
//一种方法就是使用rocking KO映射插件进行映射
var koMapItems=ko.mapping.fromJS(项目)
//您可以跳过映射插件,然后继续使用
//手动创建自己的VM映射
//(您可以使用映射插件以较少的工作量完成此操作)
var goforbrokeVM=函数(项)
{
变量_name=ko.可观察(item.name)
var _dance=function(){return _name+'is space monkey'}
返回{
姓名:_Name,
isSelected:ko.可观察(项目isSelected),
太空猴:(舞)
}
}
//不要忘记分配和创建GoForBrokeVM
变量epicItemVMs=[]
对于(var i=0;我看一下clickcounter示例,它在父组件中有两个嵌套组件。这些嵌套组件不共享相同的viewmodel,而是通过事件进行通信。另一方面,salesDashboard组件中的两个子组件共享父组件的单视图模型。我是否回答了?或者我是否缺少问题btw?我编辑我的问题是为了更具体。事件或共享单个视图模型不同于嵌套视图模型-这将更接近于在Silverlight中执行MVVM的方式。仅供参考:请查看knockoutjs()中的“with”绑定。在这里,您可以有一个单亲视图模型,为每个组件在其中嵌套子视图模型。然后在组件视图中,您可以使用“with”绑定来指定它需要与哪个子视图模型绑定。嗯,是的……我想这就够了。我将测试并报告。嗯……但是如何将子视图模型传递给组件nt的initialize()
?你能提供一个完整的例子吗?是的。但是我对如何用KO实现TODO不感兴趣,这是很明显的-只是如何使它与BoilerplateJS结构一起工作。
<div id="items">
<span data-bind="text: parentPropA"></span>
<!-- Step through one set of items in ParentVM -->
<div data-bind="foreach: simpleMappedItems">
<input type="checkbox" data-bind="checked: isSelected">
<span data-bind="text: Name"></span>
</div>
<!-- Or jump into the nested models and go crazy -->
<!-- ko with: nested -->
<div data-bind="foreach:elements">
<div data-bind="text: spaceMonkey"></div>
</div>
<div data-bind="text: otherMethod"></div>
<!-- /ko -->
</div>