Доступ к DOM из Backbone.js Просмотреть класс - PullRequest
Новая
       2

Доступ к DOM из Backbone.js Просмотреть класс

2 голосов
/ 04 января 2012

Я учусь Backbone.js и застрял на этом простом примере. Не могли бы вы объяснить, что не так с этим кодом, из-за которого окно предупреждения отображается пустым? 

<html>
    <head>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.2/underscore-min.js" type="text/javascript"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js" type="text/javascript"></script>
    </head>
    <body>
    <div id="test_div">test</div>
    <script>
        $(function() {
            TestView = Backbone.View.extend({
                tagName: "div",
                initialize: function() {
                    alert(this.$("#test_div").text());
                }
            });
            window.App = new TestView;
        });
    </script>    
    </body>
</html>

Ответы [ 3 ]

3 голосов
/ 04 января 2012

проблема в том, что ваш взгляд не был привязан к DOM, вы можете указать элемент при инициализации своего взгляда, чтобы исправить это ... 

<html>
    <head>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.2/underscore-min.js" type="text/javascript"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js" type="text/javascript"></script>
    </head>
    <body>
    <div id="test_div">test</div>
    <script>
        $(function() {
            TestView = Backbone.View.extend({
                tagName: "div",
                initialize: function() {
                    alert(this.$("#test_div").text());
                }
            });
            window.App = new TestView({el: 'body'});
        });
    </script>    
    </body>
</html>

другой способ сделать это - указать el в самом представлении 

TestView = Backbone.View.extend({
    el: '#test_div',
    tagName: "div",
    initialize: function() {
        alert($(this.el).find('#test_div').text());
    }
});

для меня представления работают лучше, если вы используете их в своем контейнере, не используйте глобальные селекторы в jquery, всегда работайте с this.el, который является самим представлением. если вам нужно что-то изменить вне div, взгляните на возбуждение событий и их отлов. Но, конечно, вы можете работать так, как вам нравится.

дополнительная информация об атрибуте el представления: http://documentcloud.github.com/backbone/#View-el

пример для jsfiddle: http://jsfiddle.net/saelfaer/Lp2N2/1/

3 голосов
/ 06 января 2012

При работе в функции просмотра this. $ Относится к this.el.Посмотрите этот код в backbone.js, где определен класс представления, это $ экземпляр, который вы на самом деле используете: 

// jQuery delegate for element lookup, scoped to DOM elements within the
// current view. This should be prefered to global lookups where possible.
$ : function(selector) {
  return (selector == null) ? $(this.el) : $(selector, this.el);
},

Так что. $ Не $, как вы знаете, когда вы находитесь вфункция представления.Это эквивалентно определению $ вручную: 

var test = $("div", this.el)

Чтобы получить доступ к глобальному $ из представления, просто используйте $.Тем не менее, ограниченная область $ существует по причине;разделение интересов.Ваш код представления должен работать только с элементами внутри него.Доступ к элементам $ за пределами представления заново вводит код спагетти, то есть то, чего магистраль должна избежать

В качестве альтернативы, вы можете просто неправильно понять различные способы инициализации el.Используя свойство tagName в определении представления (а также не передавая el в конструктор представления), вы указываете магистрали создать контейнер div для вашего представления, который в любом случае является тегом по умолчанию, поэтому в этом нет необходимости.

Чтобы вид был нацелен на определенный ранее существующий элемент, используйте селектор как el в определении вида, например; 

TestView = Backbone.View.extend({
    el: "#test_div",
2 голосов
/ 04 января 2012

Чего вы ожидаете?В вашем div нет текста, поэтому он оповещается пустым.Если вы хотите увидеть текст там, вам сначала нужно добавить его к this.el.

Редактировать: this.$ ограничен this.el Я вижу, что вы пытаетесь получить к нему доступ.Если вы не укажете this.el как тело, подобное 

TestView = Backbone.View.extend({
  el: "body",
  ...

, тогда this.$ будет работать.Однако вы можете просто опустить this и использовать $("#test_div").text()

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...