0

todos.js backbone.js デモをいじっています。

デモでは、次のように初期化関数でデータを取得する 1 つの入力テキスト ボックスがあります。

<input id="new-todo" type="text" placeholder="Todo item...">

initialize: function () {

        this.input = this.$("#new-todo");

私の質問は、1 つではなく 3 つの入力テキスト ボックスからデータを取得することは可能でしょうか?

私はこれを試すことができましたが、これはあまりうまくスケーリングしていないようです:

<input id="new-todo1" type="text" placeholder="Todo item...">
<input id="new-todo2" type="text" placeholder="Todo item...">
<input id="new-todo3" type="text" placeholder="Todo item...">

初期化: 関数 () {

    this.input = this.$("#new-todo1");
    this.input =+ this.$("#new-todo2");
    this.input =+ this.$("#new-todo3");

より良い方法はありますか？

ありがとう

4

3 に答える 3

1

複数の入力から値を取得し、それらを todo アイテムのタイトルとして配置するとします。初期化で入力への参照を保存することをお勧めします：

initialize: function () {
   this.input = this.$("#new-todo");
   ...
}

createOnEntermethodは次のように変更する必要があります。

createOnEnter: function(e) {

   //concatenate the values from all inputs
   var val = "";
   this.input.each(function() {
     val += ($(this).val());
   });

  if (e.keyCode != 13) return;
  if (!val) return;

  Todos.create({title: val});

  //reset all the input elements
  this.input.each(function() {
     $(this).val('');
  });
}

入力要素はすべて同じ ID (「new-todo」) を持つ必要があります。

于 2013-08-30T16:40:55.663 に答える
1

あなたが持っている場合：

<input class="todo" type="text" placeholder="Todo item...">
<input class="todo" type="text" placeholder="Todo item...">
<input class="todo" type="text" placeholder="Todo item...">

それから

initialize: function () {

    this.$inputs = this.$(".todos");

これらの入力をキャッシュします（あなたが言ったように値を取得しません）。それから

this.$inputs.each(function() {
  console.log($(this).val());
});

値を出力するか、次のように値を配列に入れることができます。

var values = this.$inputs.map(function() {
  return $(this).val();
});

次に、これらの値から文字列を作成できます

values.join(' ');

または、追加のスタイル ポイントにUnderscore'sを使用できます。reduce

var string = _(this.$inputs).reduce(function(memo, el) {
  return memo + ' ' + $(el).html();
}, '');
于 2013-08-30T16:31:31.480 に答える