Question

我有一个发布到远程API的表单。表单工作正常，但我需要使用Ajax调用填充选择框中的选项。

这是我到目前为止所做的，但对下一步没有任何意义。

form.html

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{


searchBaar= [[UISearchBar alloc] initWithFrame:CGRectMake(0.0f, 0, SCREEN_WIDTH, 44.0f)];
searchBaar.autocorrectionType = UITextAutocorrectionTypeNo;
searchBaar.autocapitalizationType = UITextAutocapitalizationTypeNone;
searchBaar.keyboardType = UIKeyboardTypeDefault;
searchBaar.returnKeyType=UIReturnKeySearch;
searchBaar.placeholder = @"Search";
searchBaar.delegate = self;
searchBaar.showsCancelButton = NO;
searchBaar.tintColor=[UIColor blackColor];


return searchBaar;

的javascript

<form data-bind="submit: mySubmit" role="form">
    <select data-bind="
        options: operative,
        optionsValue: 'id',
        optionsText: function(i) {
            return i.FirstName + ' ' + i.LastName
        },
        optionsCaption: 'Choose...'
    "></select>
    <select data-bind="
        options: claim,
        optionsValue: 'id',
        optionsText: function(i) {
            return i.id
        },
        optionsCaption: 'Choose...'
    "></select>

    <textarea data-bind="value: body" cols="23" rows="5"></textarea>
    <input data-bind="value: entryDate" type="text">
    <button type="submit">Go</button>
</form>

Answer 1

您需要声明一个可观察的数组，然后立即调用您的ajax端点（此代码段假定您的ajax结果不需要任何处理作为选项）：

myOptions: ko.observableArray(),

$.ajax({
        url: '/api/optionsUrl/',
        type: "GET",
        datatype: "json",
        processData:false,
        contentType: "application/json; charset=utf-8",
        success: function (result){
            myOptions(result);
        }
    });

然后你可以在你的html中设置这些选项：

<select data-bind="
    options: myOptions,
    optionsValue: 'id',
    optionsText: function(i) {
        return i.id
    },
    optionsCaption: 'Choose...'
"></select>

Answer 2

我需要使用Ajax调用填充选择框中的选项。

好吧，让它们可观察（即DEBUG_MSG(("reached this point in code")); DEBUG_MSG(("value of x = %i", x));），发出你的Ajax请求并在它们返回时填充它们。

（我已对您的代码进行了一些其他细微更改，请仔细阅读。）

ko.observableArray()

和

var viewModel = {
    operatives: ko.observableArray(),
    claims: ko.observableArray(),
    body: ko.observable(),
    entryDate: ko.observable(),
    selectedOperative: ko.observable(),
    selectedClaim: ko.observable(),
    submit: function () {
        $.post('/api/entry/', {
            operative: this.selectedOperative(),
            claim: this.selectedClaim(),
            body: this.body(),
            entryDate: this.entryDate()
        }, 'json').done(function (result){
            console.log('submit success', result);
        });
    }
};

$.get('/api/operatives/').done(viewModel.operatives);
$.get('/api/claims/').done(viewModel.claims);

ko.applyBindings(viewModel);

请注意：

<form data-bind="submit: submit" role="form">
    <select data-bind="
        value: selectedOperative,
        options: operatives,
        optionsValue: 'id',
        optionsText: function(i) {
            return i.FirstName + ' ' + i.LastName
        },
        optionsCaption: 'Choose...'
    "></select>
    <select data-bind="
        value: selectedClaim,
        options: claims,
        optionsValue: 'id',
        optionsText: id
        optionsCaption: 'Choose...'
    "></select>

    <textarea data-bind="value: body" cols="23" rows="5"></textarea>
    <input data-bind="value: entryDate" type="text">
    <button type="submit">Go</button>
</form>

相当于：

$.get('/api/operatives/').done(viewModel.operatives);

当然，这取决于你的API，你可以采取这个小捷径。

在淘汰赛中通过ajax选择绑定

2 个答案: