javascript - Pass html input value to knockout view -


please me issue have.

embedded in crm on demand have view needs take values crm input fields perform search against crm through web service , show view if duplicate records found.

here have code libraries against crm {crm.context.ts}:

    /*      * context helpers      */      declare var epmcrm: any;      class context {           private getparameterbyname(name) {             name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");             var regex = new regexp("[\\?&]" + name + "=([^&#]*)"),                 results = regex.exec(location.search);             return results == null ? "" : decodeuricomponent(results[1].replace(/\+/g, " "));         }          config: { objects: { [key: string]: } } = {             objects: {                 "homepage": {                     name: "homepage"                 },                 "task": {                     name: "task",                     idparam: "taskdetailform.id",                     screens: {                         "/ondemand/user/taskdetail": "detail",                         "/ondemand/user/taskedit": "edit"                     }                 },                 "account": {                     name: "account",                     idparam: "accountdetailform.id",                     screens: {                         "/ondemand/user/taskdetail": "detail",                         "/ondemand/user/taskedit": "edit"                     }                 },                 "user": {                     name: "user",                     idparam: "userdetailform.id",                     screens: {                         "/ondemand/user/userdetail": "detail",                         "/ondemand/user/useredit": "edit"                     }                 },                 "opportunity": {                     name: "opportunity",                     idparam: "opportunitydetailform.id",                     screens: {                         "/ondemand/user/opportunitydetail": "detail",                         "/ondemand/user/opportunityedit": "edit"                     }                 },                 "contact": {                     name: "contact",                     idparam: "contactdetailform.id",                     screens: {                         "/ondemand/user/contactdetail": "detail",                         "/ondemand/user/contactedit": "edit",                        // "/ondemand/user/contactinsert": "create"                     }                 }             }         };          private knownpaths: { [key: string]: } = {             "/ondemand/user/homepage": this.config.objects["homepage"],             "/ondemand/user/taskdetail": this.config.objects["task"],             "/ondemand/user/taskedit": this.config.objects["task"],             "/ondemand/user/accountdetail": this.config.objects["account"],             "/ondemand/user/accountedit": this.config.objects["account"],             "/ondemand/user/contactdetail": this.config.objects["contact"],             "/ondemand/user/contactedit": this.config.objects["contact"],            // "/ondemand/user/contactinsert": this.config.objects["contact"],             "/ondemand/user/userdetail": this.config.objects["user"],             "/ondemand/user/useredit": this.config.objects["user"],             "/ondemand/user/opportunityedit": this.config.objects["opportunity"]              //"/ondemand/user/customobj2": mapping custom objects here important!         };          webserviceurl: string = null;         screen: string = null;         objecttype: string = null;         objectid: string = null;         ssotoken: string = null;         moduleroot: string = null;         rowid: string = null;         commentsaction: string = null;         status: string = null;         //crm parameters built task link;         account: string = null;         accountid: string = null;         contact: string = null;         contactid: string = null;         quote: string = null;         quoteid: string = null;         order: string = null;         orderid: string = null;         oppty: string = null;         opptyid: string = null;         lead: string = null;         leadid: string = null;         step: string = null;          //crm contact          lastname: string = null;         firstname: string = null;         email: string = null;          constructor() {              // pick out info url             this.webserviceurl = "https://" + window.location.hostname + "/services/integration";             // sso token global variable defined in web applet             this.ssotoken = epmcrm.ssotoken;             // module root global variable defined in web applet             this.moduleroot = epmcrm.moduleroot;             this.rowid = epmcrm.rowid;             this.commentsaction = epmcrm.commentsaction;             this.status = epmcrm.status;             this.step = epmcrm.step;              //crm parameters built task link;             this.account = epmcrm.account;             this.accountid = epmcrm.accountid;             this.contact = epmcrm.contact;             this.contactid = epmcrm.contactid;             this.quote = epmcrm.quote;             this.quoteid = epmcrm.quoteid;             this.order = epmcrm.order;             this.orderid = epmcrm.orderid;             this.oppty = epmcrm.oppty;             this.opptyid = epmcrm.opptyid;             this.lead = epmcrm.lead;             this.leadid = epmcrm.leadid;               //crm contact             $("#contacteditform\\.first\\ name").on("change", function () {                 this.firstname = (<htmlinputelement>document.getelementbyid("contacteditform.first name")).value;             });              $("#contacteditform\\.email\\ address").on("change", function () {                 this.email = (<htmlinputelement>document.getelementbyid("contacteditform.email address")).value;             });              $("#contacteditform\\.last\\ name").on("change", function () {                 this.lastname = (<htmlinputelement>document.getelementbyid("contacteditform.last name")).value;             });              // attempt discover contextual information             var pathname = window.location.pathname;             if (this.knownpaths[pathname]) {                 var obj = this.knownpaths[pathname];                 this.objecttype = obj.name;                 if (obj.idparam) {                     this.objectid = this.getparameterbyname(obj.idparam);                 }                 if (obj.screens) {                     this.screen = obj.screens[pathname];                 }             }           }      }      export = context;  in view models have should give me results knockout observables should mirror crm field , results perform search , return or not results: `contactsearch.ts`  import ko = require("knockout"); import context = require("libs/crm.context"); import contacts = require("libs/crm.contacts");  $("#btn_tb_contactnewform_save").hide(); $("#btn_tb_contactnewform_save_idx_1").hide(); //$("#contacteditform\\.first\\ name").on("change", assignfname); //$("#contacteditform\\.last\\ name").on("change", assignlname);  //function assignfname() { //    var firstname = (<htmlinputelement>document.getelementbyid("contacteditform.first name")).value; //    alert(firstname); //} //function assignlname() { //    var lastname = (<htmlinputelement>document.getelementbyid("contacteditform.last name")).value; //    alert(lastname); //}  //function assignemail() { //    var email = (<htmlinputelement>document.getelementbyid("contacteditform.email address")).value //    alert(email); //}   //var contactviewmodel = function () { //    var self = this; //    self.validcontacts = ko.observablearray([]); //    self.addcontact = function (validcontact) { //        self.validcontacts.puch(validcontact); //        $.ajax({ //            data: ko.tojson(this), //            contenttype: 'application/json', //            success: function (result) { //                validcontact.fname(result. //            } //        }); //    } //}  class contactsearch {     private _context: context = new context();     private _contacts: contacts = new contacts(this._context.webserviceurl);     private _firstname = this._context.firstname;     private _lastname = this._context.lastname;     private _email = this._context.email;       vfname = ko.observable(this._firstname);         vlname = ko.observable(this._lastname);          vemail = ko.observable(this._email);        //email = ko.computed({     //    read: () => $("#contacteditform\\.email\\ address").on("change", function () {                  //    })     //})     ////})     //lname = ko.observable("");     ////email = ko.computed(function () {     ////    assignemail();     //})      issearching: knockoutobservable<boolean> = ko.observable(false);     searchvalue = ko.computed({         read: () => ("[contactemail]~=" + "'" + "" + "'" + " , [contactfirstname]~=" + "'" + this.vfname() + "'" + " , [contactlastname]~=" + "'" + this.vlname() + "'")     });     contactsearchresults: knockoutobservablearray<icontact> = ko.observablearray([]);     dovalidation() {         $("#contacteditform\\.email\\ address").on("change", function () {                    })             }      docontactsearch() {         this.issearching(true);         this.contactsearchresults([]);                 this._contacts             .find(this.searchvalue(), ["id", "contactfirstname", "contactlastname", "contactemail", "accountid", "accountname"])             .done((results: icontact[]) => {                 if (results.length > 0) {                     this.contactsearchresults(results);                     this.issearching(false);                 }                 else {                     $("#btn_tb_contactnewform_save").show();                     $("#btn_tb_contactnewform_save_idx_1").show();                     alert("# of matching results= " + results.length);                 }             });     }      bindtr(element): void {         /*          * replicate crmod method of hover styles          */         var $element = $(element);         $element.hover(             () => {                 $element.attr("_savedbgcolor", $element.css("background-color"));                 $element.css("background-color", "#d3dde6");             },             () => {                 $element.css("background-color", $element.attr("_savedbgcolor"));                 $element.attr("_savedbgcolor", "");             }             );     }     bindlink(element): void {         var $element = $(element);         $element.click(             () => {                 window["donavigate"]('contactdetail?octitle=' + encodeuricomponent(this.vlname()) + '&contactdetailform.id=' + this.contactsearchresults["id"] + '&octype=', true, this, null)             },             () => {                 $element.css("text-decoration", "underline");             }             );     } }  export = contactsearch; 

david,

i have created observables , i'm binding here in html view model, source data htmlinputelement , don't know how pass values observables.

<p>email <input data-bind="value: vemail" />     <span data-bind="text: vemail"></span>     <span data-bind="text: vfname"></span>     <span data-bind="text: vlname"></span> <p>enter search spec: <textarea data-bind="value: searchvalue" />      <button type="button" data-bind="click: validation, click: docontactsearch">go</button></p>  <table class="list clist" cellspacing="0">     <thead>         <tr>             <th class="m">             <th class="m">             <th>id</th>             <th>first name</th>             <th>last name</th>             <th>email</th>             <th>account id</th>             <th>account</th>         </tr>     </thead>     <tbody data-bind="visible: issearching">         <tr>             <td colspan="99" style="text-align:center;">searching, please wait...</td>         </tr>     </tbody>     <tbody data-bind="foreach: contactsearchresults, afterrender: bindtr, click: bindlink">         <tr>             <td class="lrml">&nbsp;</td>             <td>&nbsp;</td>             <td data-bind="text: id"></td>             <td data-bind="text: contactfirstname"></td>             <td data-bind="text: contactlastname"></td>             <td data-bind="text: contactemail"></td>             <td data-bind="text: accountid"></td>             <td data-bind="text: accountname"></td>         </tr>     </tbody> </table> 

i have file create dependency crm:

var epmcrm; ((epmcrm) => {      if (!epmcrm["moduleroot"])         throw new error("epmcrm global variable not configured");      require.config({          baseurl: epmcrm.moduleroot + "/scripts/app",          paths: {              // define libs here             // 1. external             "jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min",             "jquery-ui.theme": "//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.theme.css",// added             "knockout": "//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min",             "text": "//cdnjs.cloudflare.com/ajax/libs/require-text/2.0.10/text",             "json2": "//cdnjs.cloudflare.com/ajax/libs/json2/20130526/json2.min",             "knockout.mapping": "//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping", // added daniel             // 2. internal             "koextensions": "../libs/knockout-extensions",             "libs/crm.tasks": "../libs/crm.tasks",             "libs/crm.accounts": "../libs/crm.accounts",             "libs/crm.contacts": "../libs/crm.contacts",             "libs/crm.users": "../libs/crm.users",             "libs/crm.session": "../libs/crm.session",             "libs/crm.context": "../libs/crm.context",             "libs/crm.objects": "../libs/crm.objects",             "libs/crm.utilities": "../libs/crm.utilities",             "libs/crm.viewengine": "../libs/crm.viewengine",             "libs/crm.viewmodelengine": "../libs/crm.viewmodelengine"         },         shim: {             "knockout": {                 deps: ["json2"]             }         }      });      require(["knockout", "knockout.mapping", "koextensions"],         (ko: knockoutstatic, komap: knockoutmapping) => {             ko.mapping = komap;             ko.applybindings({}, document.getelementbyid("quotewebappletcontainer"));         });        })(epmcrm || (epmcrm = {})); 

i'm coming solution eventually, because got need.

this changed this:

 $("#contacteditform\\.first\\ name").on("change", () => {             this.firstname((<htmlinputelement>document.getelementbyid("contacteditform.first name")).value);         });          $("#contacteditform\\.email\\ address").on("change", () => {             this.email((<htmlinputelement>document.getelementbyid("contacteditform.email address")).value);         });          $("#contacteditform\\.last\\ name").on("change", () => {             this.lastname((<htmlinputelement>document.getelementbyid("contacteditform.last name")).value);         }); 

this 3 variables changed observable properties:

 lastname: knockoutobservable<string> = ko.observable("");     firstname: knockoutobservable<string> = ko.observable("");     email: knockoutobservable<string> = ko.observable(""); 

and here i've made other changes:

   vfname = this._context.firstname;        vlname = this._context.lastname;         vemail = this._context.email;      issearching: knockoutobservable<boolean> = ko.observable(false);     searchvalue = ko.computed(() => {         return ("[contactemail]~=" + "'" + ko.unwrap(this._context.email) + "'" + " , [contactfirstname]~=" + "'" + ko.unwrap(this._context.firstname) + "'" + " , [contactlastname]~=" + "'" + ko.unwrap(this._context.lastname) + "'")     }); 

Comments