Backbone.js - jQuery를 사용하는 데 문제가 있습니다.

Question

jQuery.append() 및 backbonejs를 사용하는 데 약간의 문제가 있습니다. 지금은 추가하려고 시도 할 때 아무것도 발생하지 않습니다 (jQuery 객체를 반환하는 것을 제외하고). 즉, count가 여전히 0입니다. 수동으로 요소를 추가하려고 시도했지만 성공하지 못했습니다. 필자는 또한 string()을 사용하여 추가하려고 시도했으며 어떤 이유로이 작업을 수행합니다. 여기서 pageload에서 일부 객체를로드하고 첫 번째 상자에서 선택한 값을 기반으로 dependat 선택 상자를 변경하는 것이 좋습니다. 그러나 나는 당신이 볼 수있는 것처럼 조금 붙어있다. (이 같은 사소한 일에 성가시다). 나는 가이드로 사용한 소스는 여기있다 : https://github.com/shinetech/CascadingSelectsWithBackboneJS/blob/master/public/javascripts/application.js

$(function() { 
    window.AgfaRis = Backbone.View.extend({ 
     template: _.template($("#agfaris-template").html()), 

     initialize: function() { 
      _.bindAll(this, "render"); 
     }, 

     render: function() { 
      $(this.el).html(this.template(this.model.toJSON())); 
      this.EstablishHospitals(); 
      return this; // MUST return this 
     }, 

// RELEVANT STUFF FROM HERE ON 
     EstablishHospitals: function() { 
      var hospitals = new Hospitals(); 
      hospitals.url = "/_Systemer/AgfaRis/GetHospitals/" + this.model.attributes.Id; 

      var hospitalsView = new HospitalsView({el: $("#Hospitals"), collection: hospitals}); 
      var hospitalRolesView = new HospitalRolesView({el: $("#HospitalRoles"), collection: new HospitalRoles()}); 

      hospitalsView.hospitalRolesView = hospitalRolesView; 
      hospitals.fetch(); 
     } 
    }); 


    var Hospital = Backbone.Model.extend(); 
    var HospitalRole = Backbone.Model.extend(); 
    var Hospitals = Backbone.Collection.extend({ model: Hospital }); 
    var HospitalRoles = Backbone.Collection.extend({ model: HospitalRole }); 

    var LocationView = Backbone.View.extend({ 
     tagName: "option", 

     initialize: function() { 
      _.bindAll(this, "render"); 
     }, 

     render: function() { 
      $(this.el).attr('value', this.model.get('Id')).html(this.model.get('Name')); 
      return this; 
     } 
    }); 

    var LocationsView = Backbone.View.extend({ 
     events: { 
      "change": "changeSelected" 
     }, 

     initialize: function() { 
      _.bindAll(this, 'addOne', 'addAll'); 
      this.collection.bind('reset', this.addAll); 
     }, 

     addOne: function(location) { 
      var locationView = new LocationView({ model: location }); 
      this.locationViews.push(locationView); 
      $(this.el).append(locationView.render().el); 
     }, 

     addAll: function() { 
      _.each(this.locationViews, function(locationView) { locationView.remove(); }); 
      this.locationViews = []; 
      this.collection.each(this.addOne); 
      if(this.selectedId) { 
       $(this.el).val(this.selectedId); 
      } 
     }, 

     changeSelected: function() { 
      this.setSelectedId($(this.el).val()); 
     }, 

     populateFrom: function(url) { 
      this.collection.url = url; 
      this.collection.fetch(); 
      this.setDisabled(false); 
     }, 

     setDisabled: function(disabled) { 
      $(this.el).attr('disabled', disabled); 
     } 
    }); 

    var HospitalsView = LocationsView.extend({ 
     setSelectedId: function(hospitalId) { 
      this.hospitalRolesView.selectedId = null; 
      this.hospitalRolesView.setHospitalId(hospitalId); 
     } 
    }); 

    var HospitalRolesView = LocationsView.extend({ 
     setHospitalId: function(hospitalId) { 
      this.populateFrom("/_Systemer/AgfaRis/GetHospitalRoles/" + hospitalId); 
     } 
    }); 
}); 

디버그 데이터

this.model.get('Id') and .get('Name') works, they return the value and text seen below. 

(HtmlOptionElement) 
this.locationViews[0].render().el 
{...} 
    defaultSelected: false 
    form: null 
    index: 0 
    label: "" 
    selected: false 
    text: "--- Velg Sykehus ---" 
    value: "--- Velg Sykehus ---" 
    dataFld: "" 
    dataFormatAs: "" 
    dataSrc: "" 
    currentStyle: {...} 
    runtimeStyle: {...} 
    accessKey: "" 
    className: "" 
    contentEditable: "inherit" 
    dir: "" 
    disabled: false 
    id: "" 
    innerHTML: "--- Velg Sykehus ---" 
    isContentEditable: false 
    lang: "" 
    offsetHeight: 0 
    offsetLeft: 0 
    offsetParent: null 
    offsetTop: 0 
    offsetWidth: 0 
    onabort: null 
    onblur: null 
    oncanplay: null 
    oncanplaythrough: null 
    onchange: null 
    onclick: null 
    oncontextmenu: null 
    ondblclick: null 
    ondrag: null 
    ondragend: null 
    ondragenter: null 
    ondragleave: null 
    ondragover: null 
    ondragstart: null 
    ondrop: null 
    ondurationchange: null 
    onemptied: null 
    onended: null 
    onerror: null 
    onfocus: null 
    oninput: null 
    onkeydown: null 
    onkeypress: null 
    onkeyup: null 
    onload: null 
    onloadeddata: null 
    onloadedmetadata: null 
    onloadstart: null 
    onmousedown: null 
    onmousemove: null 
    onmouseout: null 
    onmouseover: null 
    onmouseup: null 
    onmousewheel: null 
    onpause: null 
    onplay: null 
    onplaying: null 
    onprogress: null 
    onratechange: null 
    onreadystatechange: null 
    onreset: null 
    onscroll: null 
    onseeked: null 
    onseeking: null 
    onselect: null 
    onstalled: null 
    onsubmit: null 
    onsuspend: null 
    ontimeupdate: null 
    onvolumechange: null 
    onwaiting: null 
    outerHTML: "<option value="--- Velg Sykehus ---">--- Velg Sykehus ---</option>" 
    style: {...} 
    tabIndex: 0 
    title: "" 
    all: {...} 
    behaviorUrns: {...} 
    canHaveChildren: true 
    canHaveHTML: true 
    children: {...} 
    document: {...} 
    filters: {...} 
    hideFocus: false 
    innerText: "--- Velg Sykehus ---" 
    isDisabled: false 
    isMultiLine: true 
    isTextEdit: false 
    language: "" 
    onactivate: null 
    onafterupdate: null 
    onbeforeactivate: null 
    onbeforecopy: null 
    onbeforecut: null 
    onbeforedeactivate: null 
    < More... (The first 100 of 259 items were displayed.) > 


<select id="Hospitals"> 
    <option value="">Select</option> 
</select><br /> 
<select id="HospitalRoles"> 
    <option value="">Select</option> 
</select> 

Answer 1

select 요소에있는 "옵션"요소를 추가로 네 항상있을 것이다 문제. 당신이보기 LocationView를 제거하고 this.el.options.add로 추가 할 경우에 당신은 보조 노트로

http://www.w3schools.com/jsref/coll_select_options.asp