0

type='number' ボックスに基づいて多数のテキスト ボックスを作成する方法を考えていたので、誰かがナンバー ボックスに 1 を追加するとすぐに、別のテキスト ボックス フィールドが backbone.js ビューに追加されます。 .そして、誰かがそれらのテキスト ボックスに値を入力したら、各値をバックボーン モデル配列のスポットに追加します。コードの一部を次に示します。

    <label for='choices'># Choices for Students</label>
    <input type='number' name='choices' step=1 />

    initialize: function(opts) {
    this.model = new QuestionCreateModel({
        mode: null,
        choices: ['A', 'B', 'C'],
        Question: "Question goes here",
        MaxChoices: 0,
        MinChoices: 0,
        WordLimit: 0,
        CharLimit: 0,
    }),

ご覧のとおり、入力 type='number' を取得してテキスト ボックスをロードし、バックボーン モデルのchoices 配列に値を割り当てることができるようにします。

助けてくれてありがとう！

-ストゥ

4

1 に答える 1

0

あなたのコードは不十分だと思います。

まず、コレクションとモデルが必要です。

次に、コレクションのイベントの追加、削除、変更、またはリセットをリッスンするビューを作成します。これを行うと、ビューはそれらのイベントを処理し、レンダリングする必要があるものは何でもレンダリングします。

myView = Backbone.View.extend({
   initialize : function() {
       this.collection = this.options.collection || new myCollection();
       this.collection.on("add remove reset change", this.render, this)
   },
   events : {
       "change [type='number']" : "numberChanged"
   },
   numberChanged : function(ev) {
       var $el = $(ev.target || ev.srcElement);
       var model = $el.data("model");
       model.set("selectedChoice", $el.val());
   },
   render : function() {
       this.$el.empty();
       this.collection.each(function(model) {
           $("<yourinput>").data("model", model)
               .appendTo(this.$el);
       }, this);
   }
});

モデルとコレクション

var myModel = Backbone.Model.extend({
   initialize : function() {
      this.on("change:selectedChoice", this.onChoiceChanged, this);
   },
   onChoiceChanged : function(model,value) {
      // from here you know, that a value was selected, you now
      // can say the collection, it should create a new model
      if (this.collection) this.collection.push();
      // this will trigger a "add" event and your "view" will react and rerender.
   }
});

var myCollection = Backbone.Collection.extend({
   model : myModel
});
于 2013-04-20T14:38:26.557 に答える