骨幹事件沒有解僱和關於框架使用的一般反饋

我對backbone.js非常新，我掙扎了一下。我想出了一種方法從服務器（以json形式）成功地將數據傳送到屏幕上，但是我是否正確地使用它？骨幹事件沒有解僱和關於框架使用的一般反饋

我的所有視圖都設置了this.el，但視圖的事件沒有觸發（）...什麼是最好的前進方向？

下面是代碼：

var surveyUrl = "/api/Survey?format=json&callback=?"; 

AnswerOption = Backbone.Model.extend({}); 

AnswerOptionView = Backbone.View.extend({ 

    initialize: function() { 
     _.bindAll(this, 'updateCheckedState'); 
    }, 

    events: { 
     "click .answerOptionControl": "updateCheckedState" //still noy firing :-(
    }, 

    render: function() { 
     this.model.get('answerOption').questionChoiceType = this.model.get('questionChoiceType'); 
     var template = _.template($("#questionAnswerOptionTemplate").html(), this.model.get('answerOption')); 

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

    updateCheckedState: function(e) { 
     alert("Here is my event origin: " + e.target) 
    } 
}); 

Question = Backbone.Model.extend({}); 

QuestionView = Backbone.View.extend({ 
    render: function() { 

     var template = _.template($("#questionTemplate").html(), this.model.get('question')); 
     $(this.el).html(template); 

     /*validator code removed*/ 

     for (var i = 0; i < this.model.get('question').answerOptions.length; i++) { 
      var qModel = new AnswerOption({ 
       answerOption: this.model.get('question').answerOptions[i] 
      }); 

      var view = new AnswerOptionView({ model: qModel }); 

      this.$('fieldset').append(view.render().el.innerHTML); 
     } 

     return this; 
    } 
}); 

Survey = Backbone.Model.extend({ 
    url: function() { return this.get("id") ? surveyUrl + '/' + this.get("id") : surveyUrl; } 
}); 

SurveyList = Backbone.Collection.extend({ 
    model: Survey, 
    url: surveyUrl 
}); 

SurveyView = Backbone.View.extend({ 
    initialize: function() { 
     _.bindAll(this, 'render'); 
     this.model.bind('refresh', this.render); 
     this.model.bind('change', this.render); 
    }, 

    // Re-render the contents 
    render: function() { 
     for (var i = 0; i < this.model.attributes[0].questions.length; i++) { 

      var view = new QuestionView(); 
      var qModel = new Question({ 
       question: this.model.attributes[0].questions[i] 
      }); 

      view.model = qModel; 
      $(this.el).append(view.render().el.innerHTML); 
     } 

     this.el.trigger('create'); 
    } 
}); 

$(document).ready(
function() { 
    aSurvey = new Survey({ Id: 1 }); 
    window.App = new SurveyView({ model: aSurvey, el: $("#questions") }); 
    aSurvey.fetch(); 
});

-html

<body> 
    <div id="questions"></div> 
    <!-- Templates --> 
    <script type="text/template" id="questionAnswerOptionTemplate"> 
     <input name="answerOptionGroup<%= questionId %>" id="answerOptionInput<%= id %>" type="checkbox" class="answerOptionControl"/> 
     <label for="answerOptionInput<%= id %>"><%= text %></label> 
    </script> 
    <script type="text/template" id="questionTemplate"> 
     <div id="question<%=id %>" class="questionWithCurve"> 
      <h1><%= headerText %></h1> 
      <h2><%= subText %></h2> 
      <div data-role="fieldcontain" id="answerOptions<%= id %>" > 
       <fieldset data-role="controlgroup" data-type="vertical"> 
        <legend> </legend> 
       </fieldset> 
      </div> 
     </div> 
    </script> 
</body>

而且JSON從服務器：

? ({ 
    "name": "Survey", 
    "questions": [{ 
     "surveyId": 1, 
     "headerText": "Question 1", 
     "subText": "subtext", 
     "type": "Choice", 
     "positionOrder": 1, 
     "answerOptions": [{ 
      "questionId": 1, 
      "text": "Question 1 - Option 1", 
      "positionOrder": 1, 
      "id": 1, 
      "createdOn": "\/Date(1333666034297+0100)\/" 
     }, { 
      "questionId": 1, 
      "text": "Question 1 - Option 2", 
      "positionOrder": 2, 
      "id": 2, 
      "createdOn": "\/Date(1333666034340+0100)\/" 
     }, { 
      "questionId": 1, 
      "text": "Question 1 - Option 3", 
      "positionOrder": 3, 
      "id": 3, 
      "createdOn": "\/Date(1333666034350+0100)\/" 
     }], 
     "questionValidators": [{ 
      "questionId": 1, 
      "value": "3", 
      "type": "MaxAnswers", 
      "id": 1, 
      "createdOn": "\/Date(1333666034267+0100)\/" 
     }, { 
      "questionId": 1, 
      "value": "1", 
      "type": "MinAnswers", 
      "id": 2, 
      "createdOn": "\/Date(1333666034283+0100)\/" 
     }], 
     "id": 1, 
     "createdOn": "\/Date(1333666034257+0100)\/" 
    }, { 
     "surveyId": 1, 
     "headerText": "Question 2", 
     "subText": "subtext", 
     "type": "Choice", 
     "positionOrder": 2, 
     "answerOptions": [{ 
      "questionId": 2, 
      "text": "Question 2 - Option 1", 
      "positionOrder": 1, 
      "id": 4, 
      "createdOn": "\/Date(1333666034427+0100)\/" 
     }, { 
      "questionId": 2, 
      "text": "Question 2 - Option 2", 
      "positionOrder": 2, 
      "id": 5, 
      "createdOn": "\/Date(1333666034440+0100)\/" 
     }, { 
      "questionId": 2, 
      "text": "Question 2 - Option 3", 
      "positionOrder": 3, 
      "id": 6, 
      "createdOn": "\/Date(1333666034447+0100)\/" 
     }], 
     "questionValidators": [{ 
      "questionId": 2, 
      "value": "3", 
      "type": "MaxAnswers", 
      "id": 3, 
      "createdOn": "\/Date(1333666034407+0100)\/" 
     }, { 
      "questionId": 2, 
      "value": "1", 
      "type": "MinAnswers", 
      "id": 4, 
      "createdOn": "\/Date(1333666034417+0100)\/" 
     }], 
     "id": 2, 
     "createdOn": "\/Date(1333666034377+0100)\/" 
    }, { 
     "surveyId": 1, 
     "headerText": "Question 3", 
     "subText": "subtext", 
     "type": "Choice", 
     "positionOrder": 3, 
     "answerOptions": [{ 
      "questionId": 3, 
      "text": "Question 3 - Option 1", 
      "positionOrder": 1, 
      "id": 7, 
      "createdOn": "\/Date(1333666034477+0100)\/" 
     }, { 
      "questionId": 3, 
      "text": "Question 3 - Option 2", 
      "positionOrder": 2, 
      "id": 8, 
      "createdOn": "\/Date(1333666034483+0100)\/" 
     }, { 
      "questionId": 3, 
      "text": "Question 3 - Option 3", 
      "positionOrder": 3, 
      "id": 9, 
      "createdOn": "\/Date(1333666034487+0100)\/" 
     }], 
     "questionValidators": [{ 
      "questionId": 3, 
      "value": "3", 
      "type": "MaxAnswers", 
      "id": 5, 
      "createdOn": "\/Date(1333666034463+0100)\/" 
     }, { 
      "questionId": 3, 
      "value": "1", 
      "type": "MinAnswers", 
      "id": 6, 
      "createdOn": "\/Date(1333666034470+0100)\/" 
     }], 
     "id": 3, 
     "createdOn": "\/Date(1333666034457+0100)\/" 
    }, { 
     "surveyId": 1, 
     "headerText": "Question 4", 
     "subText": "subtext", 
     "type": "Choice", 
     "positionOrder": 4, 
     "answerOptions": [{ 
      "questionId": 4, 
      "text": "Question 4 - Option 1", 
      "positionOrder": 1, 
      "id": 10, 
      "createdOn": "\/Date(1333666034500+0100)\/" 
     }, { 
      "questionId": 4, 
      "text": "Question 4 - Option 2", 
      "positionOrder": 2, 
      "id": 11, 
      "createdOn": "\/Date(1333666034507+0100)\/" 
     }, { 
      "questionId": 4, 
      "text": "Question 4 - Option 3", 
      "positionOrder": 3, 
      "id": 12, 
      "createdOn": "\/Date(1333666034507+0100)\/" 
     }], 
     "questionValidators": [{ 
      "questionId": 4, 
      "value": "3", 
      "type": "MaxAnswers", 
      "id": 7, 
      "createdOn": "\/Date(1333666034493+0100)\/" 
     }, { 
      "questionId": 4, 
      "value": "1", 
      "type": "MinAnswers", 
      "id": 8, 
      "createdOn": "\/Date(1333666034497+0100)\/" 
     }], 
     "id": 4, 
     "createdOn": "\/Date(1333666034490+0100)\/" 
    }], 
    "id": 1, 
    "createdOn": "\/Date(1333666034243+0100)\/" 
})

來源

2012-04-05 Leonardo Seccia

儘管目前我沒有時間查看代碼，但您可能會發現[本文]（http://lostechies.com/derickbailey/2011/11/09/backbone-js-object-literals -views-events-jquery-and-el /）有幫助。我相信作者也是StackOverflow的定期撰稿人。 – 2012-04-05 23:31:59

嗨科林，感謝您的鏈接。優秀的文章。我改變並簡化了代碼，但我仍然遇到了問題... – 2012-04-06 15:45:31

它不會因爲你是如何追加工作subview

this.$('fieldset').append(view.render().el.innerHTML);

Backbone.Views中的事件處理工作方式是事件而不是附加到元素附加到視圖的根元素，然後將它們委派給子元素。在你的情況下，不要將子視圖的根元素附加到父視圖，而是附加其內容，從而中斷事件處理，因爲將事件綁定到的元素永遠不會將其添加到DOM。

this.$('fieldset').append(view.render().el);

刪除innerHTML屬性，它將再次工作。如果在實例化Backbone.Views時不想要包裝元素，則可以始終傳遞元素以聲稱爲el選項屬性。

var view = new AnswerOptionView({ model: qModel, el: this.$('fieldset') }).render();

這樣，AnswerOptinView將聲明fieldset元素並將事件綁定到它。

來源

2012-04-07 08:26:06

骨幹事件沒有解僱和關於框架使用的一般反饋

回答

相關問題