骨干.js绑定问题

Question

i'm new to backbone and trying to get a model update to update my html through binding but having no luck. 我是骨干新手，试图通过绑定来获取模型更新以更新我的html，但没有运气。 I'm using the jquery.window plugin to create the popup window. 我正在使用jquery.window插件创建弹出窗口。 Check i press the change-title button and update my models title, the html doesn't get updated. 检查我按更改标题按钮并更新我的模型标题，html不会更新。 Would really appreciate any help, Thanks 非常感谢您的帮助，谢谢

Eric 埃里克

Here is my code 这是我的代码

HTML: HTML：

<!DOCTYPE html>
<html>
<head>
    <title>I have a back bone</title>
</head>
<body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
    <script src="js/jquery.window.js"></script>
    <script src="js/underscore.js"></script>
    <script src="js/backbone.js"></script>
    <script src="js/app.js"></script>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/jquery.window.css">

    <button id="add-window">Add Window</button>
    <button id="change-title">Change Title</button>


    <script type="text/template" id="search_template">
        <label><%= title %></label>
        <input type="text" id="search_input" />
        <input type="button" id="search_button" value="Search" />
    </script>

</body>
</html>

Javascript: Javascript：

(function($) {

    AppWindow = Backbone.Model.extend({
        title : "John",
        window : null       
    });

    AppWindows = Backbone.Collection.extend({
        initialize : function(models, options) {
            this.bind("add", options.view.addWindowView);
        }
    });

    WindowView = Backbone.View.extend({

        initialize : function(){
            _.bindAll(this, "render");
            this.model.bind("change:title");
            this.template = _.template($("#search_template").html());
            this.render().el;
        },

        render : function(){
            var formString = this.template(this.model.toJSON());
            var win = $.window({
                icon : 'http://www.fstoke.me/favicon.ico',
                title : this.model.get("title"),
                content : formString,
                x : 80,
                y : 80,
                resizable : true,
            });
            this.el = $("#" + win.getWindowId()+".window_frame");
            this.delegateEvents(this.events);
            return this;
        }

    });

    AppView = Backbone.View.extend({
                views: {},
                el : $("body"),
                initialize : function() {
                    this.appWindows = new AppWindows(null, {
                        view : this
                    });
                },

                events : {
                    "click #add-window" : "addWindow",
                    "click #change-title" : "changeTitle"
                },

                addWindow : function() {
                    var window_title = "Eric";
                    var window_model = new AppWindow({
                        title : window_title
                    });
                    // Add a new model to our friend collection
                    this.appWindows.add(window_model);
                },

                changeTitle : function(){
                    var win = this.appWindows.at(0);
                    win.set("title", "jamjamajm");
                },

                addWindowView : function(model) {
                    var view = new WindowView({
                        model : model
                    });
                    model.set("window", view);
                },

                deleteWindow : function(wnd){
                    console.log("deleteing");
                }
            });

    var appview = new AppView;
})(jQuery);

Answer 1

You forgot to add a method to the change:title binding for the model of WindowView . 您忘记为WindowView模型的change:title绑定添加方法。

The Backbone.js documentation says the following about the on -function (aka bind): Backbone.js文档对on功能（也称为绑定）说了以下内容：

object.on(event, callback, [context]) Alias: bind object.on（event，callback，[context]）别名：bind

Bind a callback function to an object. 将回调函数绑定到对象。 The callback will be invoked whenever the event is fired. 每当触发事件时，都会调用该回调。

So with this.model.bind("change:title"); 因此，使用this.model.bind("change:title"); you have just supplied the event that is triggered every time the attribute title is changed. 您刚刚提供了每次更改属性title都会触发的事件。 You haven't supplied the callback-function so nothing happens when the event is fired. 您尚未提供回调函数，因此在触发事件时没有任何反应。 I presume you want the callback to be the WindowView 's render-function, so this should fix it: 我假设您希望回调是WindowView的render-function，因此应该可以解决此问题：

this.model.on("change:title", this.render); // changed to on as bind is deprecated but still supported

This way whenever the event change:title is fired, render of the WindowView corresponding to the model will be called. 这样，无论何时触发事件change:title ，都将调用与模型相对应的WindowView render 。

骨干.js绑定问题

问题描述

1 个解决方案

解决方案1
1 2012-07-25 13:01:09

骨干.js绑定问题

问题描述

1 个解决方案

解决方案1 1 2012-07-25 13:01:09

解决方案1
1 2012-07-25 13:01:09