HTML template filled in server-side and updated client-side

HTML template filled in server-side and updated client-side

Asked on December 22, 2018 in knockout js.
Add Comment


  • 3 Answer(s)

        For the initial value to be stored before the Angular activates- Try the ng-bind attribute in the place of{{bound strings}}, from the example:

    <ul>
        <li ng-repeat="feature in features">
            <div ng-bind="feature.title">Hello</div>
            <p ng-bind="feature.description">This feature was rendered server-side but can be updated once angular activates</p>
        </li>
    </ul>
    

        The user should add the initial data-set as piece of a script tag in the document, so that during the  angular DOES activate ,The displayed information is not cleaned with nulls .

    Note :

        The other solution is create  an ng-repeat at the top of the list , have it configured to fill out depend on the ‘features‘ list itself. Following that ng-repeat element, have non-ng-repeat elements that will contain the  ng-hide attribute with the setting ng-hide=”features”, if the Angular loads, all the elements from the original server-give  list hide themselves, and the angular list move to  existence. No hacky modifications to Angular, and no fiddling with the direct ng-bind attribute.

        Update : The user should  send the  piece of script capable of reading that initial server-element for its data to feed it into angular before angular synchronizes if the user need to prevent  a blink where angular clears the data while waiting for a request for the equal data from the server.

    Answered on December 22, 2018.
    Add Comment

        Both KO and angular same type of method for  having the initial state of the data provided into the page markup as JSON , and on DOM ready use that to develop the  initial Javascript view model ,  Then apply the Knockout bindings to develop the UI. So the UI gets built client side even for the item such as the product which is already placed  on the server.

        This refers to the  same templates is injected both for the initial UI creation and during the user can include  something on client side , like a sub-product with its own view model and template.

    Answered on December 22, 2018.
    Add Comment

        Using  the AngularJS is must for using the directive that copies the values given on the server into the model and have continuous actions retrieve  the data through the  JavaScript.

        A method is used which is explained here  in an ASP.NET WebForms application to pre-populate the model through the hidden values from the server on the 1st request. Per the discussion this breaks from the Angular way but it is possible.

        Html :

    <input type="hidden" ng-model="modelToCopyTo" copy-to-model value='"this was set server side"' />
    

        JavaScript:

    var directiveModule = angular.module('customDirectives', []);
    directiveModule.directive('copyToModel', function ($parse) {
    return function (scope, element, attrs) {
    $parse(attrs.ngModel).assign(scope, JSON.parse(attrs.value));
    }
    });
    

     

    Answered on December 22, 2018.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.