Javascript 将输入框绑定到主干中另一个div的CSS

这里是相对于主干的noob。这是我第一次尝试用它构建应用程序

我有4个包含输入框的HTML div。这些输入框在选项模型中由topLeftOption、topRightOption等表示。在每个输入框旁边是一个div，我想显示用户在框中键入的颜色预览。另外，我希望在模板重新呈现时，输入值保留在输入框中。我真的很难理解这一点。见下面的代码：

HTML模板

视图定义

CSS

模型/视图实例

---

最后终于弄明白了。使用changeValue函数通过从视图更改事件向模型传递对受影响div的引用来编辑模型。因此，使用正确的值更新模型。然后，我在视图的渲染函数中使用以下代码来更新相应的预览div

render: function() {
    console.log(this.model.toJSON());

    this.$el.html(this.template(this.model.toJSON()));
    $('#topLeftPreview').css("background-color",    
this.model.get('topLeftOption'));
    $('#topRightPreview').css("background-color",   
this.model.get('topRightOption'));
    $('#bottomLeftPreview').css("background-color", 
this.model.get('bottomLeftOption'));
    $('#bottomRightPreview').css("background-color",       
this.model.get('bottomRightOption'));

    $('#topLeftOption').val(this.model.get('topLeftOption'));
    $('#topRightOption').val(this.model.get('topRightOption'));
    $('#bottomLeftOption').val(this.model.get('bottomLeftOption'));
    $('#bottomRightOption').val(this.model.get('bottomRightOption'));



}

var app = app || {};

app.optionsModel = Backbone.Model.extend({

defaults: {

    size: "",
    topLeftOption: {
        value: "",
        link: $("#topLeftPreview")
    },
    topRightOption: {
        value: "",
        link: $("#topRightPreview")
    },
    bottomLeftOption: {
        value: "",
        link: $("#bottomLeftPreview")

    },
    bottomRightOption: {
        value: "",
        link: $("#bottomRightPreview")
    }

},

changeCSS: function(colour, id) {
    //was playing with stuff here
},

changeValue: function(e) {
    var colour = $(e.currentTarget).val()
    var id = e.currentTarget.id;
    console.log(colour);
    console.log(id);
    this.set(id.toString(), colour);
}
});

var app = app || {};

app.optionsView = Backbone.View.extend({
el: "#optionsContainer",
template: _.template($("#optionsTemplate").html()),
initialize: function(options) {
    this.render();
    this.model.on("change", this.render, this)

},

events: {
    "change input.gridOption": "contentChanged"
},

contentChanged: function(e) {
    this.model.changeValue(e);
    var x = this.model.changedAttributes();

},

render: function(e) {

    this.$el.html(this.template());
}
})

#optionsContainer {
width:20em;

background-color:#F3F9FF;
display:block;
margin: 0 auto;
position: relative;
}

.optionsLabel {
padding:.4em;
}

.gridOption {
width:41% !important;
}

#hexOptions {
margin-left:1.5em;


}

.hexOptionsPreview {
float:left;
width:1em;
height:1em;
border: 1px solid black;
background-color:#245269;
}

var gridSize = $('#gridSize :selected').val();

var optionsM = new app.optionsModel();


var optionsV = new app.optionsView({
model: optionsM
});

render: function() {
    console.log(this.model.toJSON());

    this.$el.html(this.template(this.model.toJSON()));
    $('#topLeftPreview').css("background-color",    
this.model.get('topLeftOption'));
    $('#topRightPreview').css("background-color",   
this.model.get('topRightOption'));
    $('#bottomLeftPreview').css("background-color", 
this.model.get('bottomLeftOption'));
    $('#bottomRightPreview').css("background-color",       
this.model.get('bottomRightOption'));

    $('#topLeftOption').val(this.model.get('topLeftOption'));
    $('#topRightOption').val(this.model.get('topRightOption'));
    $('#bottomLeftOption').val(this.model.get('bottomLeftOption'));
    $('#bottomRightOption').val(this.model.get('bottomRightOption'));



}