Backbone绑定模型查看

Question

我目前正在学习如何处理backbone.js。 目前我遇到的问题是，当视图通过用户输入时，模型不会更新。

当我更改textarea的输入并单击按钮时，我发送旧数据，因为视图没有通知模型发生了更改。

我做错了什么？

后览

define([
    'jquery',
    'underscore',
    'backbone',
    'postModel'
], function($, _, Backbone, PostModel){

    var PostView = Backbone.View.extend({
        timer: null,

        el: $('.admin__wrapper'),
        template: $('#post_template'),

        initialize: function () {
            console.log('Initializing Post View');
            this.model = new PostModel({id: this.id});
            this.listenTo(this.model, 'change', this.render);
            this.model.fetch();
        },

        events: {
            'keyup textarea': 'keyup',
            'click button': 'submit'
        },

        submit: function(event) {
            this.model.save();
        },

        render: function(){
            var template = _.template(this.template.html(), { post: this.model });
            this.$el.html(template);

            return this;
        }
    });

    return PostView;
});

PostTemplate

<script type="text/template" id="post_template">
    <div class="post__title">
        <div class="entry">
            <input class="input--less" name="title" type="text" value="<%= post.get('title') %>" placeholder="Post title">
        </div>
    </div>

    <div class="entry post__panel post__markdown">
        <header class="entry__header post__panel__header">
            <span><small>markdown</small></span>    
        </header>

        <div class="post__boundary">
            <textarea name="content" id="editor" class="input--less post__editor" rows="5"><%= post.get('content') %></textarea>
        </div>
    </div>

    <div class="entry post__panel post__html">
        <header class="entry__header post__panel__header">
            <span><small>preview</small></span> 
            <span id="reading-time" class="float--right" style="text-align: right"></span>  
        </header>

        <div class="post__boundary">
            <div class="post__preview" id="preview"><%= post.get('content_compiled') %></div>
        </div>
    </div>

    <div class="post__footer">
        <span class="batch--tag-4 post__icon"></span>
        <button class="button button--blue post__button">Publish</button>
        <a href="#?" class="batch--settings-2 post__settings post__icon"></a>
    </div>
</script>

Answer 1

当用户点击提交您没有从视图中获取数据时，您只是使用默认值保存模型，因此不会触发任何更改事件，您必须在keyup方法中执行类似的操作由keyup event。

keyup: function(e)
{
    this.model.set(e.target.name, e.target.value, {silent: true});
}

假设您正确命名了textarea，将更新正确的模型属性。因此，当this.model.save调用submit时，将保存这些属性，触发更改事件并重新呈现视图。

Answer 2

当您更改页面中的表单时，此更改不会自动在您的模型中设置，您必须自己设置。

Answer 3

Backbone不像Angular Js那样提供双向数据绑定，您需要自己设置模型然后同步模型。

在Bakcbone中尝试Backbone Mutators 2路数据绑定。 另外，请阅读此article