Simple SwiftUI MVVM and Combine

so today's question was what's the simplest example of an mvvm project if you will so um i thought we'd just try that today so here's a brand new empty project and i thought the scenario we could try is that we would just have a text field whose input or lack of input influences a text element so that is we'll have a text field here and let's just use um whatever title enter some text and then we'll have a binding here so let's create that let's just call that state or my text and that'll be a string and now we'll just say dollar my text so that's the binding to that text and we'll give this a little border so we can see it color.gray all right let's put this into v stack otherwise we'll get two uh preview windows okay let's update the preview all right so what we want to happen and i'll hit play is that when i enter some text here where now says hello world will basically display either an x or checkbox basically designating whether that field is has some text in it or is empty so the challenge here is well how do we do that in just swift ui with no viewmodels of any kind and the short answer is it's not actually straightforward there's no direct way to say uh change this field or change this text element when another thing changes so what we'll do instead is do a very very simple view model showing how we can disconnect the view model from the view and therefore bind those two fields together in the viewmodel code not in the ui code so first we would basically you know we would need two pieces of data right my text and my message right and for now it'll be empty so would put my message here right this would be the thing we display and as i mentioned that the real question now is um how do we bind one to the other so let's add a little bit of padding just to make it look nicer there we go and just to show you that it's there for now i'll just say md and actually you know yeah i'll leave it at that so now see it's empty and how do we connect them so let's create a very simple view model and actually vmware needs to be a class because what's most important for view models is they have to be observable what that means is the view can notice changes that occur there all right so then what we'll do is we'll take these two and move them up into the view model instead and rather than state because they're no longer view state they're now published properties of the view model and publish just means that when they change they'll broadcast their change because they're observable and the content view will observe them so we can do here is to say we need a state object in this case because it's not transient state it's state that's going to persist for more than one creation of this content view just think of it as it's a single view model that sticks around regardless of how many times swift ui recreates this view so we can just call this the model view model and uh we'll just create a new a new view model so that's it we'll connect this up in a minute but first let's just create an initializer so we can create it um all right let's leave it at that actually so let's come back here we'll go to model and now we we would type dollar sign model dot my text so notice here now you're getting a binding to that property inside of the model observable object view model if that makes sense so for my message same idea but we don't need a binding here we just need to display the contents of my message okay so now if we run this okay it's running and i can type of course nothing's happening we haven't connected the two together but what's really nice is you can do all that connection now in your view model there's no code required in the content view itself in the view part of your of your app so now we go here and you might say well how do i connect the two well one easy way is using combine right so i'll import combine and i'll just say how about when i see my text change let's update my message so the easiest way to do that is to use there's many ways by the way and combine to do this stuff but the simplest way we'll start for today is to use a simple map operator that means i want to map the value of one thing to potentially something else in this case i want to take i want to take whatever um actually my text sorry well what comes in is dollar zero is the value of my text right so i want to take that value and if it's empty why don't we return something and if it's not it do return something else so how about if it's empty um let's return this emoji and how about if it's not empty we'll return a checkbox and then what's really nice is now it's converted the value of the string if it's empty or not into a new string but we don't want to put that into my text we actually want to put it into my message so there's actually a really easy way to do that you can use the assign operator that one and you can publish it you can assign it to another published property so in this case we'll assign it to my message and believe it or not that's it so now if we rerun or update the preview notice it now has an x so if i start typing it changes to a checkbox if i go back now it's back to an x so this is a great example of the absolute simplest way of not only having a very basic view model but more importantly for this example it's also using combine to kind of bind these two properties together and have one be a function of the other you can see now i'm using very simple logic but now you can do things like string validation is the password strong so on and so forth thanks okay that's it so if you've got other problems you'd like me to solve or want me to go into even more depth about any specific topic just send me a message on twitter at paul colton and i'll do my best to cover in a future episode thanks

Channel: Paul Colton

Views: 4,644

Keywords:

Id: 6ZIZ5jGovEY

Length: 6min 38sec (398 seconds)

Published: Tue Mar 16 2021