揭示模块模式、KnockoutJS和CoffeeScript
Revealing Module Pattern, KnockoutJS, and CoffeeScript
这可能是一个非常初级的问题,也可能是我同时使用了太多东西。我正在尝试将KnockoutJS与Revearing Module Pattern一起使用,并尝试编写CoffeeScript。我把我的模型放在一个单独的函数中。这是代码:
myapp =(->
person =->
firstname = ko.observable "k"
lastname = ko.observable "d"
firstname:firstname,
lastname:lastname
person : person
)()
$(->
ko.applyBindings(new myapp.person())
@
)
现在,这是在Visual Studio中使用工作台创建JavaScript,如下所示:
(function() {
var myapp;
myapp = (function() {
var person;
person = function() {
var firstname, lastname;
firstname = ko.observable("k");
lastname = ko.observable("d");
return {
firstname: firstname,
lastname: lastname
};
};
return {
person: person
};
})();
$(function() {
ko.applyBindings(new myapp.person());
return this;
});
}).call(this);
现在,这给出了一个错误,它现在可以找到要绑定的元素。以下是简单的HTML文本:
<p>
Firstname<span data-bind="text: myapp.person().firstname"></span>
Lastname<span data-bind="text: myapp.person().lastname">
</span>
</p>
如果我在没有自调用函数的情况下创建正常的JavaScript,它可以正常工作。以下是功能:
myapp = (function () {
var person;
person = function () {
var firstname, lastname;
firstname = ko.observable("k");
lastname = ko.observable("j");
return {
firstname : firstname,
lastname : lastname
}
}
return {
person: person
}
})();
$(function () {
ko.applyBindings(new myapp.person());
})
有人能解释一下这里出了什么问题吗?或者有没有其他方法可以编写CoffeeScript来使用KnockoutJS?
如果需要进一步的细节,请发表评论。
下面是一个工作示例:http://jsfiddle.net/gurkavcu/Kqa2k/
myapp = (->
person =->
firstname = ko.observable "jack"
lastname = ko.observable "sparrow"
firstname:firstname,
lastname:lastname
person : person
)()
$(->
ko.applyBindings(new myapp.person())
@
)
您需要更改绑定语法:
<p>
Firstname: <span data-bind="text:firstname"></span>
Lastname: <span data-bind="text:lastname">
</span>
</p>
因为当您调用ko.applyBindings(new-myapp.person())时,您只为一个person对象而不是所有myapp对象设置了视图。
如果你想为整个myapp设置你的视图,你需要像这样更改你的代码:
JSfiddle链接
myapp = (->
person = (fname,lname)->
firstname = ko.observable fname
lastname = ko.observable lname
firstname:firstname,
lastname:lastname
person : new person("Jack" , "Sparrow")
)()
$(->
ko.applyBindings(myapp)
@
)
<p>
Firstname: <span data-bind="text:person.firstname"></span>
Lastname: <span data-bind="text:person.lastname">
</span>
</p>
相关文章:
- knockoutjs可观察数组
- KnockoutJS-组件-多个实例
- 从复选框和Selects-KnockoutJS中获取值的总和
- 使用KnockoutJS绑定的YUI DataTable
- observablearray KnockoutJs中的对象
- 在foreach中加载所有项后,Knockoutjs组件回调
- KnockoutJS:为虚拟元素使用嵌套的条件if语句
- 用于多个选项卡和模块化的knockoutjs设计模式
- 在Knockoutjs中的ViewModels之间共享变量状态
- 使用javascript加载knockoutjs组件
- KnockoutJS更新行和字段
- 使用knockoutjs组件创建对话框
- 基于值控制knockoutjs中的样式
- Knockoutjs-带有动态变量的模板
- Knockoutjs-我无法使字段绑定
- Kendo-knockoutjs integration
- Knockoutjs映射-很难让它工作
- knockoutjs,复选框是有延迟的检查
- 使用可见的knockoutJS时出错
- KnockoutJS-扩展购物车示例