Установка значения src в iframe

Question

Я пытаюсь установить значение src в представлении Backbone с элементом iFrame. Это значение src происходит от модели, но оно не отображается должным образом. Он возвращает Not Found The requested URL was not found on the server. If you entered the URL manually please check your spelling and try again. Как я могу заставить это работать? Есть предположения?

Вот код:

app.js

var Person = Backbone.Model.extend({ 
    defaults: { 
     url: 'https://www.w3schools.com' 
    } 
}); 

var PersonView = Backbone.View.extend({ 
    el: '<iframe src="<%= url %>"></iframe>', 

    initialize: function() { 
     this.render() 
    }, 

    render: function() { 
     this.$el.html(this.model.get('url')); 
    } 
}); 


var person = new Person; 
var personView = new PersonView({ model: person }); 

$(document.body).append(personView.el); 

Он работает только тогда, когда я в консоли:

var btn = document.createElement("iframe"); 
btn.src = 'https://www.w3schools.com'; 
document.body.appendChild(btn); 

Answer 1

Ваша первая проблема заключается ваш взгляд el-х:

el: '<iframe src="<%= url %>"></iframe>' 

Предполагается, что el является строкой выбора DOM или узлом DOM. Ваш фрагмент HTML не является ни тем, ни другим. Кроме того, разметка шаблона поддерева (то есть <%= url %>) не будет оцениваться в el, поскольку el не является шаблоном.

Ваша вторая проблема заключается в том, что ваш render:

this.$el.html(this.model.get('url')); 

пытается установить содержание на ваш взгляд-х el к значению атрибута модели url и пытается установить содержание iframe Безразлично» ничего полезного. Как правило, вы бы сказать что-то больше, как это в render:

var tmpl = _.template(some_template_string); 
this.$el.html(tmpl(this.model.toJSON())); 
return this; 

this.model.toJSON() обычно возвращает объект пар ключ/значение и то, что скомпилированный шаблон Подчеркивание хочет видеть.

В вашем случае вам даже не нужна ваша собственная реализация render, вы можете сделать все, правильно построив свой el. Если вы обратитесь к документации по View#el, вы увидите это:

this.el может быть решен из строки селектора DOM или элемента; в противном случае он будет создан из вида tagName, className, id и attributes.

Вы хотите tagName из iframe и { src: the_url_from_the_model } для attributes поэтому ваше мнение становится только это:

var PersonView = Backbone.View.extend({ 
    tagName: 'iframe', 
    attributes: function() { 
     return { 
      src: this.model.get('url') 
     }; 
    }, 
    initialize: function() { 
     this.render(); 
    }, 
}); 

Демо: https://jsfiddle.net/ambiguous/4t248ejp/