Knockout在点击按钮时将数据绑定到文本框

时间:2018-02-01 15:18:08

标签: jquery knockout.js

我是Knockout的新手。我试图获取文本框的值,单击一个按钮并使用REST,从SharePoint获取一些数据并在另一个文本框中更新它,我能够获取数据但无法将其绑定到文本框。请帮忙。我只是想在名字文本框中显示帐户名称

到目前为止,这是我的代码:

    <script type="text/javascript" src="/sites/crdrdev/SiteAssets/JS/Knockout/knockout-min.js"></script>
    <script type="text/javascript" src="/sites/crdrdev/SiteAssets/JS/JQuery/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="/sites/crdrdev/SiteAssets/JS/Request%20Controller/RequestController.js"></script>
    <script type="text/javascript" src="/sites/crdrdev/SiteAssets/JS/Main/test.js"></script>
    <div id="custom-new-form">
       <fieldset>
         <legend>Sales Return Approval</legend>
           <div class="left-panel">
             <div class="form-field">
               <div class="field-label">
                 <span>ID:</span>
                    <span class="ms-formvalidation" title="This is a required field."> *</span>
               </div>
             <div class="field-value">
                <input class="single-text-input" type="text" data-bind="textInput: newISID().ISID" id="ISID"/>
                <br/>
                <!--<div class="ms-formvalidation validation-message" data-bind="visible: ISIDValidator">
                    <span role="alert">You must specify a value for this required field.</span>
                </div>-->
            </div>
        </div>
        <input type="button" id="btnGetUserProperties" value="Go!" data-bind="click: getUserProperties">
        <div class="form-field">
            <div class="field-label">
                <span>First Name:</span>
                <span class="ms-formvalidation" title="This is a required field."> *</span>
            </div>
            <div class="field-value">
                <input class="single-text-input" type="text" data-bind="value:firstName"/>
                <br/>
                <!--<div class="ms-formvalidation validation-message" data-bind="visible: fstNameValidator">
                    <span role="alert">You must specify a value for this required field.</span>
                </div>-->
            </div>
        </div>
    </div>
</fieldset>
</div>

 function getISID()
 {
    var self=this;
    self.isid=ko.observable();
 }
 function item(data)
 {
    var self=this;
    alert(data);
    var viewModel={firstName:ko.observable(data.d.AccountName)};
 }

 function userViewModel() {
    var self = this;
    self.newISID= ko.observable(new getISID());
    self.getUserProperties = function () {
    var koisid=ko.toJSON(self.newISID());
    var splitisid=koisid.split(':"')[1];
    var isid=splitisid.replace('"}','')

    var oisid=isid + '@.com';
    var fullisid='i:0%23.f|membership|' + oisid;
    var url="/_api/SP.UserProfiles.PeopleManager/GetPropertiesFor(accountName=@v)?@v="+"'"+fullisid+"'";
    alert(url);
    $.ajax({
            url: someurl,
            method: "GET",
            async: false,
            headers: { "Accept": "application/json; odata=verbose" },
            success: function (data) {
                if(data.d.Email=="undefined" || data.d.Email==undefined)
                {
                    alert("Enter correct ISID");
                }
                else
                {                       
                    return new item(data);
                }                   
            },
            failure: function(){
                alert("please enter correct ISID")
            }
    });
}   
}
$(document).ready(function () {
   ko.applyBindings(new userViewModel());
});

1 个答案:

答案 0 :(得分:0)

您的ajax来电会返回新的item,但这种情况永远不会发生。为了能够data-bind="value:firstName",您需要在视图模型中拥有firstName成员:

self.firstName = ko.observable();

然后在你的ajax调用中,分配它:

self.firstName(data.d.AccountName);

您可以在视图中创建item成员并绑定item.firstName,但我在此处看不到任何附加图层的原因。