0

初始化视图时，如何将模型绑定到创建的特定视图？视图当前在应用程序启动时初始化。另外，如何将模型绑定到集合？(function ($) { //在 dom 中加载所有内容

//Creation, Edit, Deletion, Date
var Note = Backbone.Model.extend({
    defaults: {
        text: "write here...",
        done: false
    },

    initialize: function (){
        if(!this.get("text")){
            this.set({"text": this.default.text});
        }
    },

    edit: function (){
        this.save({done: !this.get("done")});
    },

    clear: function (){
        this.destroy();
    }
});

var NoteList = Backbone.Collection.extend({
    model:Note
});

var NoteView = Backbone.View.extend ({
    el: "body",

    initialize: function(){
        alert("initialized");
        var list = new NoteList;    
        return list;
    },

    events: {
        "click #lol" : "createNote"
    },

    createNote : function(){
        var note = new Note;
        this.push(note);
        alert("noted");
    }
});

var ninja = new NoteView;

})(jQuery);

4

2 回答 2

1

更新

我刚刚看了@James Woodruff 的回答，这促使我再看一下你的代码。我第一次看的不够仔细，但我仍然不确定你在问什么。如果您要问如何让模型或视图侦听并处理另一个触发的事件，请查看 James 的调用示例，bind()让视图侦听模型上的change（或change:attr）事件（尽管我建议on()使用的bind()，取决于您使用的 Backbone 版本）。

但是基于再次查看您的代码，我修改了我的答案，因为我看到您尝试以没有意义的方式做一些事情，所以也许这就是您要问的。

新答案

这是您问题中的代码，我添加了评论：

var NoteView = Backbone.View.extend ({

    // JMM: This doesn't make sense. You wouldn't normally pass `el`
    // to extend(). I think what you really mean here is
    // passing el : $( "body" )[0] to your constructor when you
    // instantiate the view, as there can only be one BODY element.

    el: "body",

    initialize: function(){
        alert("initialized");

        // JMM: the next 2 lines of code won't accomplish anything.
        // Your NoteList object will just disappear into thin air.
        // Probably what you want is one of the following:
        // this.collection = new NoteList;
        // this.list = new NoteList;
        // this.options.list = new NoteList;

        var list = new NoteList;    

        // Returning something from initialize() won't normally
        // have any effect.        

        return list;
    },

    events: {
        "click #lol" : "createNote"
    },

    createNote : function(){
        var note = new Note;

        // JMM: the way you have your code setup, `this` will be
        // your view object when createNote() is called. Depending
        // what variable you store the NoteList object in (see above),
        // you want something here like:
        // this.collection.push( note ).

        this.push(note);
        alert("noted");
    }
});

这是您的代码的修订版本，其中包含对我评论的内容的更改：

var NoteView = Backbone.View.extend( {

  initialize : function () {

    this.collection = new NoteList;    

  },
  // initialize


  events : {

    "click #lol" : "createNote"

  },
  // events


  createNote : function () {

    this.collection.push( new Note );

    // Or, because you've set the `model` property of your
    // collection class, you can just pass in attrs.

    this.collection.push( {} );

  }
  // createNote

} );


var note = new NoteView( { el : $( "body" )[0] } );
于 2012-08-03T22:26:24.563 回答
1

您必须将视图绑定到模型，因此当模型更新 [触发事件] 时，绑定到模型的所有相应视图也会更新。集合是类似模型的容器......例如：Comments Collection包含类型的模型Comment。

为了将视图绑定到模型，它们都必须被实例化。例子：

var Note = Backbone.Model.extend({

    defaults: {
       text: "write here..."
    },

    initialize: function(){

    },

    // More code here...

});


var NoteView = Backbone.View.extend({

    initialize: function(){
       // Listen for a change in the model's text attribute
       // and render the change in the DOM.
       this.model.bind("change:text", this.render, this);
    },


    render: function(){
       // Render the note in the DOM
       // This is called anytime a 'Change' event
       // from the model is fired.
       return this;
    },

    // More code here...

});

现在是集合。

var NoteList = Backbone.Collection.extend({

    model: Note,

    // More code here...

});

现在是实例化所有内容的时候了。

var Collection_NoteList = new NoteList();
var Model_Note = new Note();
var View_Note = new NoteView({el: $("Some Element"), model: Model_Note});

// Now add the model to the collection
Collection_NoteList.add(Model_Note);

我希望这能回答你的问题，或者引导你走向正确的方向。

于 2012-08-04T03:07:33.120 回答