@extends('web.layouts.template', compact('title'))

@push('head')
    <script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"></script>
@endpush

@section('content')
    <div class="container">

        {{-- <!-- This is called "view" of HTML markup that defines the appearance of UI --> --}}

        <p>First String: <input data-bind="value: firstString" /></p>
        <p>Second String: <input data-bind="value: secondString" /></p>

        <p>First String: <strong data-bind="text: firstString">Hi</strong></p>
        <p>Second String: <strong data-bind="text: secondString">There</strong></p>

        <p>Derived String: <strong data-bind="text: thirdString"></strong></p>
    </div>
@endsection


@section('script')
    <script>
        function AppViewModel() {
            this.firstString = ko.observable("");
            this.secondString = ko.observable("");

            this.thirdString = ko.computed(function() {
                return this.firstString() + " " + this.secondString();
            }, this);
        }

        // Activates knockout.js
        ko.applyBindings(new AppViewModel());
    </script>
@endsection