Backbone.View не отвечает на Backbone.UI

Question

Я строю небольшую программу, позволяющую отображать некоторые детали группы людей. Существует возможность обновить детали. Однако обновления не оказываемая зрения:

Вот мой server.js:

var express= require("express"), 
bodyparser= require("body-parser"); 

var app= express(); 

app.use(express.static(__dirname+ "/public")); 
app.use(bodyparser.json()); 

app.get("/", function(req, res){ 
    res.render("index.jade"); 
}); 

app.listen(3002); 

Мой index.jade является:

doctype html 

link(rel="stylesheet", href="backbui.css") 

#main 

script(src= "jquery.js") 
script(src= "underscore.js") 
script(src= "backbone.js") 
script(src= "laconic.js") 
script(src= "moment.js") 
script(src= "backbui.js") 
script(src= "theapp.js") 

Моего theapp.js файл:

var Person= Backbone.Model.extend({}), 
People= Backbone.Collection.extend({}); 

var Genders= new Backbone.Collection(
     [ 
      {name: "Female", id: 1}, 
      {name: "Male", id: 0} 
]); 

var people= new People([ 
      {name: "John Doe", gender: Genders.get(0), birthday: 
      new Date(1990, 5, 15), married: false}, 
      {name: "Jane Smith", gender: Genders.get(1), birthday: 
      new Date(1985, 10, 10), married: true}, 
      {name: "Tom Smith", gender: Genders.get(0), birthday: 
      new Date(1980, 1, 20), married: true}, 
      {name: "Sally Fox", gender: Genders.get(1), birthday: 
      new Date(1998, 7, 31), married: false} 
]); 

var table= new Backbone.UI.TableView({ 
    model: people, // collection can also be passed 
    columns: [ 
     {title: "Name", content: "name"}, 
     {title: "Gender", content: "gender", 
     format: function(model){ return model.get("name"); }}, 
     {title: "Birthday", content: "birthday", 
     format: function(date){ return date.toString(); }}, 
     {title: "Married", content: "married", 
     format: function(married){ return married? "yes": "no"; }} 
    ] 
}); 

var sally= people.models[3]; 

var textbox= new Backbone.UI.TextField({ 
    model: sally, 
    content: "name", 
}); 

var radios= new Backbone.UI.RadioGroup({ 
    model: sally, 
    content: "gender", 
    alternatives: Genders, 
    altLabelContent: "name", 
}); 

var Appview= Backbone.View.extend({ 
    el: "#main", 

    render: function(){ 
      this.$el.append(table.render().el); 
      this.$el.append(textbox.render().el); 
      this.$el.append(radios.render().el); 
      return this; 
    } 
}); 

new Appview().render(); 

Я хочу видеть обновление 4-го имени в реальном времени в таблице, а именно: Салли Фокс, когда я вношу изменения в область текстового поля. Аналогичным образом, я хотел бы видеть, как меняется поле таблицы Sally Fox, когда я делаю изменения в переключателе.

В основном я хочу, чтобы мой Backbone.TableView слушать изменения, сделанные в других виджетов Backbone.UI как Backbone.UI.RadioGroup и Backbone.UI.TextField

Answer 1

Вы находитесь на правильном пути. Добавьте слушателей в свои взгляды, чтобы слушать, когда происходят изменения с коллекцией people. Изменения в отдельных моделях (т. Е. sally) также будут пузыриться через коллекцию.

Я не слишком хорошо знаком с Backbone.UI, но изменения будут идти что-то вроде этого:

// Make the table listen to changes in the passed-in collection & re-render 
// when needed 
var table= new Backbone.UI.TableView({ 
    model: people, // collection can also be passed 
    columns: [ 
     {title: "Name", content: "name"}, 
     {title: "Gender", content: "gender", 
     format: function(model){ return model.get("name"); }}, 
     {title: "Birthday", content: "birthday", 
     format: function(date){ return date.toString(); }}, 
     {title: "Married", content: "married", 
     format: function(married){ return married? "yes": "no"; }} 
    ], 

    initialize: function() { 
     // When a change event happens to the model/collection, re-render 
     this.listenTo(model, 'change', this.render); 
    } 
}); 

Вы бы сделать то же самое для других представлений, которые вы хотите, чтобы реагировать на изменения данных. Ключ должен состоять в том, чтобы представления отображали один и тот же экземпляр модели/коллекций, которые вы меняете, а затем слушайте конкретные изменения.

Если это вас не устраивает, опубликуйте комментарии и/или JSFiddle, и мы сможем добиться такого прогресса.

Answer 2

Хотя ответ дал Петр (выше) также верно, то можно также внести изменения непосредственно в магистральную-ui.js файл библиотеки:

Внутри метода инициализации для Tableview (поиск Tableview в file backbone-ui.js, найдите его функцию инициализации) add:

this.model.on("change", this.render, this); 

и все будет в порядке. (Возможно, вы захотите добавить ту же строку внутри метода initialize свойства list файла backbone-ui.js, чтобы получить отзывчивые представления для списков)