一個Backbone.js的查看是一個簡單的選擇列表

Question

我已經建立了一個骨幹網供電的庫，它允許用戶添加/刪除項目，很像託多斯例子。

每次產品添加或刪除 - 或整個集合被刷新 - 我需要的是在頁面的其他領域採用最新的項目，如選擇來重新填充其他兩個選擇元素。這將如何實施，我簡單地重新填充在保持到集合的引用視圖的渲染功能選擇元素？

我很想創造只爲選擇選項的視圖，但是這似乎有點小題大做，考慮到視圖尤其是在不需要重新行爲的任何事件。其他視圖使用選擇選項來填充表單數據。

Answer 1

你是正確的：爲每一個選擇選項的獨特景緻。它根本沒有矯枉過正;這是Views的目的。他們傾聽來自他們模特的事件，在這種情況下是項目列表，並在收到事件時重新繪製自己的事件。它們具有容器名稱，所以一旦你在View子類的參數中建立了這些名稱，就再也不需要考慮它們了。您可以獨立設計風格。

這就是全部的點意見是他們的方式。

更重要的是，您也可以抽象出「視圖列表的事物」，然後您可以從該視圖繼承每個特定視圖，並添加兩個特性：filter（「latest」）和渲染器。無論如何，你必須寫出渲染器;你也可以利用一些小分子糖來清楚你在哪裏渲染。這比寫評論要好。

Answer 2

不從精靈伯格的已經出色答卷轉移，但要加點方面：

不要在你的模板

不遍歷集合如果要做到這一點，你還不如好吧，只需使用HTML partials和AJAX即可。相反，使用一個骨幹視圖呈現自己的看法（該 粒度就是最大限度地減少服務器同步和頁面刷新）。這 是遞歸的，可以直到沒有更多的 相關數據，以循環地重複這種模式。

- 喬納森·奧托在A Conceptual Understanding of Backbone.js For The Everyman

當然，當你想要渲染子視圖there are a few gotchas。

我做了code search，試圖找到如何做到這一點的一些例子。結果發現TodoMVC example是一個很好的模型。從Strider-CD source（MIT許可證）：

• Zipkin source
• reviewboard source

：

var UserView = Backbone.View.extend({ 

    //... is a class. not sure how to put that here 
    tagName: "option", 

    // Cache the template function for a single item. 
    template: _.template($('#user-item-template').html()), 

    // The DOM events specific to an item. 
    // maybe could put links here? but then user couldn't see on mouse-over 

    // The UserView listens for changes to its model, re-rendering. Since there's 
    // a one-to-one correspondence between a **User** and a **UserView** in this 
    // app, we set a direct reference on the model for convenience. 
    initialize: function() { 
     _.bindAll(this, 'render'); 
     this.model.bind('change', this.render); 
     this.model.bind('destroy', this.remove); 
    }, 

    // Re-render the contents of the User item. 
    render: function() { 
     $(this.el).html(this.template(this.model.toJSON())); 
     return this; 
    }, 

    // Remove the item, destroy the model. 
    clear: function() { 
     this.model.clear(); 
    } 

    }); 

    // The Application 
    // --------------- 

    // Our overall **AppView** is the top-level piece of UI. 
    var UsersView = Backbone.View.extend({ 
    // Instead of generating a new element, bind to the existing skeleton of 
    // the App already present in the HTML. 
    el: $("#user-form"), 

    // no events here either at this time 

    // At initialization we kick things off by 
    // loading list of Users from the db 
    initialize: function() { 
     _.bindAll(this, 'addAll', 'addOne','render'); 

     Users.bind('add', this.addOne); 
     Users.bind('reset', this.addAll); 
     Users.bind('all', this.render); 

     console.log("fetching Users"); 
     Users.fetch(); 
    }, 

    // Re-rendering the App just means refreshing the statistics -- the rest 
    // of the app doesn't change. 
    render: function() { 
     console.log("rendering User AppView"); 
     // might want to put some total stats for the Users somewhere on the page 

    }, 

    // Add a single todo item to the list by creating a view for it, and 
    // appending its element to the `<ul>`. 
    addOne: function(User) { 
     console.log("adding one User: " + User.get("id") + "/" + User.get("email")); 
     var view = new UserView({model: User}); 
     this.$("#user-list").append(view.render().el); 
    }, 

    // Add all items in the **Users** collection at once. 
    addAll: function() { 
     console.log("adding all Users"); 
     console.log(Users.length + " Users"); 
     Users.each(this.addOne); 
    } 


    }); 
    // Finally, we kick things off by creating the **App**. 
    console.log("starting userapp now"); 
    var UsersApp = new UsersView(); 

}); 

---

與選項的子視圖的選擇列表視圖的額外實例可見於