gpt4 book ai didi

javascript - 在 Backbone View 中填充选择列表数据的常见模式?

转载 作者:数据小太阳 更新时间:2023-10-29 04:09:09 26 4
gpt4 key购买 nike

我的 Backbone 应用程序有几个 View ,其中包含带有文本输入选择字段和复选框的表单。应使用来 self 的 API 的数据填充选择字段。给定的选择字段可以以多种不同的形式重复使用。

填充这些下拉菜单的常用方法是什么?这是我组合在一起的解决方案...是否有更通用的方法?

一个可重用的选择字段,它会自行填充...app/views/shared/location_selection.js:

define([
'jquery',
'backbone',
'app/views/base',
'app/collections/location'
], function($, Backbone, BaseView, LocationCollection) {
'use strict';

return BaseView.extend({
initialize: function(options) {
this.options = options || {};
this.options.id = this.options.id || 'location';
this.options.showBlank = typeof this.options.showBlank != 'undefined' ? this.options.showBlank : false;

this.collection = new LocationCollection();
},

render: function() {
this.setElement('<select id="' + this.options.id + '"></select>');

var self = this;
this.collection.fetch({
success: function() {
if (self.options.showBlank) {
self.$el.append('<option></option');
}

self.collection.each(function(model) {
self.$el.append('<option value="' + model.get('id') + '">' + model.get('name') + '</option>');
});
}
});

return this;
}
});
});

以及使用该 View 的另一个 View 的片段:

render: function() {
this.$el.html(this.template(this.model.toJSON()));

var locationSelectionView = new LocationSelectionView({ showBlank: !this.model.get('id') });
this.$('.location').append(locationSelectionView.render().el);

return this;
},

和表单模板:

<form role="form">
<div class="form-group">
<label for="imei">IMEI</label>
<input type="text" class="form-control" id="imei" value="{{data.imei}}" />
</div>
<div class="form-group location">
<label for="location">Location</label>
</div>
<div class="checkbox">
<label><input id="master" type="checkbox"{{#if master}} checked="checked"{{/if}} /> Master</label>
</div>
</form>

最佳答案

如果您有单独的项目 View 和 Collection View 模板,您可以这样做:

var ItemView = Backbone.View.extend({
tagName: 'option',
initialize:function(){
this.template= _.template($('#menu_item_view').html());
},
render:function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});

var CollectionView = Backbone.View.extend({
tagName: 'select',
initialize:function(){
this.collection = new ItemCollection();
this.collection.on('sync',this.render,this);
this.collection.fetch();
},
render:function(){
_.each(this.collection.models,function( item ){
this.$el.append(new ItemView({model:item}).render().el );
},this);
return this;
}
});

编辑:请注意,在 Backbone 1.0 之前,当您调用 fetch 时,它会触发“reset”,但现在它会触发“sync”,除非您编写 fetch({reset:true})。因此,请注意这一点,具体取决于您运行的 Backbone 版本。

关于javascript - 在 Backbone View 中填充选择列表数据的常见模式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18900686/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com