Question

我尝试使用输入字段的值从API获取数据请求，该输入字段位于我正在渲染的模板中。但是模板会在底部呈现，而网址会在顶部呈现，因此我会回复undefined。

This is the fiddle I'm working on at the moment

var MoviesCollection = Backbone.Collection.extend({
    url: function () {
        return "http://api.themoviedb.org/3/search/movie?api_key=a8f7039633f2065942cd8a28d7cadad4&query=" + value
    },
    parse: function (response) {
        return response.results;
    }
});

var value = $('form#autocomplete-remote input').val();

我希望在输入字段上有一个keyUp时执行数据请求，然后它应该将输入字段中的值添加到URL，这样我就应该更接近自动完成功能。< / p>

小更新

如果我从模板中删除表单和输入字段并放入HTML，我可以获取url中输入字段的值。就像this这确实给我一个小问题，因为输入字段现在不在视图中，我如何从中触发事件？

如果这是一个好方法，我只会＆＃34;需要在keyUp事件上获取集合。

另一个小更新

更改脚本的加载顺序我现在会从模板的输入字段中渲染值。现在只将它连接到keyUp。 Fiddle

Answer 1

更新了小提琴 - http://jsfiddle.net/nitincool4urchat/dxpowx27/76/

我更喜欢使用blur，但您可以将其更改回keyup

var MoviesCollection = Backbone.Collection.extend({
    url: function () {
        return "http://api.themoviedb.org/3/search/movie?api_key=a8f7039633f2065942cd8a28d7cadad4&query=" + this.query;
    },
    setQuery:function(q){
        this.query = q;
    },
    parse: function (response) {
        return response.results;
    }
});

var myCollection = new MoviesCollection();

MoviesView = Backbone.View.extend({

    initialize: function (opts) {
        this.collection = opts.collection;
        this.render();
    },

    render: function () {
        var template = _.template($("#search_template").html(), {});
        this.el.html(template);
    },

    events: {
        'blur input#search_input': 'doSearch'
    },

    doSearch: function (event) {
        var that = this;
        this.collection.setQuery($(event.currentTarget).val());
        this.collection.fetch().done(function(){
            alert("Fetch Complete : " + that.collection.length);
        });
    }
});

var search_view = new MoviesView({
    el: $("#search_container"),
    collection:myCollection
});

来自inputfield的URL中的骨干插入值

1 个答案: