Question

我在使用jQuery.append（）和backbonejs方面遇到了一些麻烦。就像现在一样，当它试图追加时，没有任何事情发生（除了它返回jQuery对象[在即时窗口中看到]）计数仍为0.我曾尝试手动添加元素，但没有成功。我也尝试使用string（）附加，这也是出于某种原因。这里的想法是在页面加载时加载一些对象，并根据在第一个框中选择的值更改其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

是的，将“OPTIONS”元素附加到SELECT元素总会有问题。如果您删除了VIEW LocationView并添加了this.el.options.add，那么您将没有probs ...

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

Backbone.js - 使用jQuery追加的麻烦

1 个答案: