Rails资产管道+ knockout.js

时间:2012-07-28 11:24:42

标签: ruby-on-rails-3 knockout.js asset-pipeline

我正在尝试在Rails 3.2.6中实现knockout.js。我正在使用宝石https://github.com/jswanner/knockoutjs-rails

我在加载ViewModel时遇到问题。

这是我的调试HTML

<div data-bind="text: ko.toJSON(users)"></div>

这是从CoffeeScript编译的JavaScript。该文件为users.js.coffee,并通过//= require_tree .

中的application.js包含在资产管道中
(function() {

  jQuery(function() {
    var User, UserViewModel;    
    User = function(id, name) {
      var self;
      self = this;
      self.id = ko.observable(id);
      self.name = ko.observable(name);
      return self.followers_count_message = ko.computed(function() {});
    };
    UserViewModel = function() {
      var self;
      self = this;
      self.users = ko.observableArray([new User('1111', 'test name'), new User('1112', 'test name2')]);
      self.addUsers = function() {
        return self.users.push(new User('1113', 'test name'));
      };
      return self.addUsers();
    };
    ko.applyBindings(new UserViewModel());
    return alert('done');
  });

}).call(this);

加载后,div会显示:[null,null,null]

奇怪的是,如果我在jsFiddle中实现它,它似乎工作。请参阅:http://jsfiddle.net/netwire88/HXYHU/2/

思想,想法?

更新日期:2012年7月31日

我可以通过更改功能来删除return来解决此问题。但是,我想将其移动到另一个CoffeeScript文件。

我在users.js.coffee尝试了此操作,但是,我收到了错误Uncaught TypeError: Cannot read property 'nodeType' of null

User = (id, name) ->
  self = undefined
  self = this
  self.id = ko.observable(id)
  self.name = ko.observable(name)
  @

UserViewModel = ->
  self = this
  self.users = ko.observableArray([new User("1111", "test name"), new User("1112", "test name2")])
  self.addUsers = ->
    self.users.push new User("1113", "test name")
  self.addUsers()
  @

ko.applyBindings new UserViewModel()

1 个答案:

答案 0 :(得分:2)

你应该注意到你发布的代码与小提琴中的代码之间存在非常非常的重要区别:你的viewmodels返回单个属性,小提琴的viewmodels没有返回。

您的代码正在创建无效的视图模型。如果你在小提琴中取消注释那些回报,它就会以完全相同的方式中断。你没有发布coffeescript给我们看,但这绝对是个问题。

Bad Viewmodel:

User = function(id, name) {
      var self;
      self = this;
      self.id = ko.observable(id);
      self.name = ko.observable(name);
      return self.followers_count_message = ko.computed(function() {});
    };

Good Viewmodel

User = function(id, name) {
      var self;
      self = this;
      self.id = ko.observable(id);
      self.name = ko.observable(name);
    };

同样适用于UserViewModel