Невозможно вставить HTML в объект JQuery

0

Я привязываю, чтобы вставить некоторый html в div на моей странице, но он не работает. Я пытаюсь вставить шаблонный html $ ('# users-found'). Html (tpl), но он не будет работать. Он работает, когда я использую это. $ El.append, но я хочу, чтобы он менялся каждый раз, когда они ищут пользователя. Есть идеи?

define([
  'jquery',     
  'underscore', 
  'backbone',
  'parse',
  'text!templates/searchUsers_tpl.html',
  'text!templates/userList_tpl.html'    
], function($, _, Backbone, Parse, SearchUsersTpl, UserListTpl){
var SearchUsersView = Backbone.View.extend({

    el: '#content',

    initialize: function(){
        console.log('search users');
        this.render();
    },

    render: function(){
        this.$el.html(SearchUsersTpl);
    },

    events: {
        'click #submit-search': 'search'
    },

    search: function(){
        var self = this;
        var input = $('#search-users-input').val();
        console.log('search input: ' + input);
        var query = new Parse.Query(Parse.User);
        query.equalTo('username', input);
        query.find({
            success: function(results){
                console.log("Successfully retrieved " + results.length + " users.");

                for (var i = 0; i < results.length; i++) {
                    var object = results[i];
                    console.log(object.id + ' - ' + object.get('username'));
                }

                var tpl = _.template(UserListTpl, {users: results});
                $('#users-found').html(tpl);
            },
            error: function(){
                console.log('search for user failed');
            }
        });
    }

}); 
  return SearchUsersView;      
});

Html, который загружается при создании представления, SearchUsersTpl

<h1>Find Friends</h1>
<br>
<br>
<input id='search-users-input' type="search" value="" placeholder="search username" class="topcoat-search-input">
<button type='search' id='submit-search' class='topcoat-button'>Search</button>
<br>
<br>
<div id='#users-found'></div>

Шаблон

<div>
 <% _.each(users, function(user) { %> 
    <li><%= user.get('username') %></li> 
 <% }); %>
</div>
Теги:
backbone.js

2 ответа

2
Лучший ответ

У вашего DIV неверный идентификатор. это должно быть <div id = 'users-found'> </div> not <div id = '# users-found'> </div>

Значение h используется только как селектор, но не требуется при указании его как идентификатора.

  • 0
    Я не вижу, как мой div имеет неправильный идентификатор. <div id = '# users-found'> </ div> $ ('# users-found')
  • 0
    Идентификаторы не начинаются с хэштегов, потому что идентификатор с хэштегом недействителен. Идентификаторы - это просто строки. Вы используете # при выборе в CSS или jQuery.
Показать ещё 2 комментария
1

убедитесь, что шаблон пользователя преобразован в объект jQuery. Попробуйте заменить:

$('#users-found').html(tpl);

с

$(tpl).appendTo($('#users-found').empty());
  • 0
    Отредактировал ваш ответ, чтобы включить .empty() и использовать форматирование кода
  • 0
    Просто попробовал, и это не сработало. Я не понимаю, почему мое решение не работает, когда это. $ El.html (tpl) работает во всех других моих представлениях.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню