javascript - Backbone 在 URL 中从输入字段插入值

Question

我正在尝试使用我正在渲染的模板内的输入字段的值从 API 获取数据请求。但是模板在底部呈现，URL 在顶部呈现，所以我得到了一个 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，这样我就离自动完成功能更近了一步。

小更新

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

如果这是一个好方法，我“只”需要在 keyUp 事件上获取集合。

另一个小更新

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

Answer 1

更新了 fiddle - 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
});