backbone js - представление динамической загрузки: должен ли el быть средством запуска или его следует запускать родительским представлением?

ProgramBox

backbone js — представление динамической загрузки: должен ли el быть средством запуска или его следует запускать родительским представлением?

Post author:admin
Запись опубликована:22 апреля, 2023
Post category:Вопросы по программированию

#javascript #view #backbone.js

#javascript #Вид #backbone.js

Вопрос:

У меня вопрос о теге el в элементе представления с динамической загрузкой. Я прикрепляю прослушиватель кликов к <a> тегу, который будет динамически загружать элемент представления (отображать его из шаблона, заполнять некоторый контент через ajax и т.д.). В настоящее время я реализовал это следующим образом:

 MyDynamicView = Backbone.View.extend({
    el: "a#dynamic-launcher",
    events: {
        "click": "launch"
    },
    initialize: function(){
        _.bindAll(this, "render");
    },
    launch: function(e){
        e.preventDefault();
        this.render();
    },
    render: function(){
                    // do template/ajax/whatever.
    }
});

Это работает довольно хорошо, но это мешает мне делать некоторые вещи. Например, если бы я хотел добавить другое событие, которое было вызвано чем-то из моего нового динамического представления, я не смог бы этого сделать (поскольку события отображаются только под родительским el ).).

Таким образом, альтернативой может быть родительское представление, которое знает о том, какой элемент запускает динамический элемент, а затем создает / визуализирует его.

 velo.AppView = Backbone.View.extend({
    el: "body",
    events: {
        "click a#dynamic-launcher": "launchDynamicView"
    },
    launchDynamicView: function(e){
        e.preventDefault();
        new MyDynamicView(); // Or something - Maybe I need to call render.  Not sure.
    }
});

Имеет ли этот второй метод больше смысла?

Любые рекомендации были бы великолепны!

Спасибо.

Ответ №1:

Самое простое решение — иметь

 MyDynamicView = Backbone.View.extend({
    el: "div",
    events: {
        "click a#dynamic launcher": "launch"
    },
    initialize: function(){
        _.bindAll(this, "render");
        el.append($("<a></a>", {
            id: "#dynamic-launcher"
        }));
    },
    launch: function(e){
        e.preventDefault();
        this.render();
    },
    render: function(){
        // render link again?
        // do template/ajax/whatever.
    }
});

Ваше представление должно содержать ссылку, а не быть ссылкой.

1. Это не то, что я ищу, хотя — ссылка, которая запускает представление, может находиться в совершенно другой части страницы, чем та, которую в конечном итоге отображает представление. Ссылка должна была быть отрисована до отрисовки представления.

2. @idbentley Ах. Затем вам нужно будет прикрепить какой-то Controller способ подключения ссылки / кнопки к созданию нового View объекта где-нибудь. Похоже скорее на View -> Controller -> View отношение, чем на ParentView -> ChildView

Ответ №2:

Похоже, вы не используете backbone Views по назначению. Вы привязываете событие к#dynamic-launcher, но этот элемент не является частью представления, в котором определена привязка этого события. Ваша вторая попытка с AppView лучше.

Конечно, реализация зависит от целей вашего приложения, но, возможно, что-то вроде этого — это то, что вам нужно:

Начальный скелет начальной HTML-страницы:

 <html>
      <head><!-- include your javascript --></head>
      <body></body>
</html>

Представление приложения

 AppView
     events: {
         "click a#dynamiclauncher" : "launch"
     }
     render: function(){
        $('body').html $(el).html(this.template())
     }
     launch: function(){
        $(el).find('.dynamic-view-location').html new DynamicView.render().el
     }

Соответствующий AppTemplate

 <p>
   Hello world
   <a id="dynamic-launcher">Launch Dynamic View</a>
   <div class=".dynamic-view-location"></div>
</p>

Динамическое представление

 DynamicView
    render: function(){
        $(this.el).html(this.template())
    }

Соответствующий шаблон динамического представления

1. По сути, это то, что я делаю во втором случае, за исключением того, что я хочу создать динамическое представление из шаблона во время запуска, а не во время рендеринга. Я бы также отметил, что вы можете использовать this.$('selector') для выбора относительно текущего представления (а не $(el).find(selector) . Я согласен, что это более правильно, чем то, что я изначально предложил, но я не вижу, что это добавляет к моему второму предложению.

2. Время запуска AppView — это время рендеринга для динамического представления. HTML для динамического представления не будет сгенерирован, пока не будет нажата эта ссылка!

3. спасибо за совет по этому поводу.$ (‘selector’). Буду использовать это в будущем!