How can i get msls.bind to work on custom control

Question

Problem

I have a date on my browse screen that I want to format with javascript.  I have made the date field a custom control and populating using both render and post render.  It works fine until I update the date on the details screen.  It does not reload.  Non custom controls are updated.

Solution not working

I have found to articles that indicate that this is because of databinding.  (See databinding)

http://blogs.msdn.com/b/lightswitch/archive/2012/07/02/writing-javascript-code-in-lightswitch-joe-binder.aspx

However, I can't get this bind event to fire to update my control.  Has anyone successfully implemented this bind.

Example of code that I can't get to work below.  Bind never fires. 

We can update our original _render code to use data binding as follows:

lightSwitchApplication.ViewProductDetail.prototype.Product_Name_render = 
function (element, contentItem) {
 var customInput = $("<input id='productname' type='text' maxlength='" + contentItem.maxLength + "'/>");
 $(customInput).appendTo($(element));
 msls.bind(contentItem, "value", function (newValue) {
 $('#productname').val(newValue);
 });
};

---

jb

Answer 1

The syntax for databindings have changed a little between the first (June) preview and preview 2. Among other things, we moved the msls.bind to the content item and renamed it dataBind (one of the reasons we renamed it was to avoid any confusion between jQuery's bind and our data binding). If you try the snippet below:

    varcustomInput = $("<input id='productname' type='text' maxlength='"+ contentItem.maxLength + "'/>");
    $(customInput).appendTo($(element));
    contentItem.dataBind("value", function(newValue) {
        $('#productname').val(newValue);

    });

you should get one way databinding to work.

Best regards,
Johan Stenberg

---

Development Lead, Visual Studio LightSwitch

Answer 2

I wrote some embarrassing code to get this to work.  I am using a list so I can't hard code the div id like the sample.  I could not figure out how to simply get the id of the content item by name to set the div so I used contentItem.parent.children[0].__stringValue to go up the tree and get it. 

Anyway it works. 

There must be a simpler way to format the date in the list.

Thanks, jb

   var s = contentItem.value.toString();
    var date = new Date(s);
   
    var id = contentItem.parent.children[0].__stringValue;
    var date_str = "<div id='divBodyLogDate" + id + "'>" + ('0' + (date.getMonth() + 1)).substr(-2, 2) + '/' + ('0' + date.getDate()).substr(-2, 2) + '/' + ('0' + date.getFullYear()).substr(-4, 4) + "</div>";
    $(element).html(date_str);

    contentItem.dataBind("value", function (newValue) {
        var id = contentItem.parent.children[0].__stringValue;
        var dateBound = new Date(newValue);
        var date_strBound = ('0' + (dateBound.getMonth() + 1)).substr(-2, 2) + '/' + ('0' + dateBound.getDate()).substr(-2, 2) + '/' + ('0' + dateBound.getFullYear()).substr(-4, 4);

        $("#divBodyLogDate" + id).text(date_strBound);
    });

---

jb